1. дома
  2. Вопрос и ответ
  3. Две таблицы, перекрывающиеся границы

Две таблицы, перекрывающиеся границы

2014-02-14 3 views
0

Хорошо, поэтому у меня есть две таблицы, одна за другой. Чтобы он отображался правильно, мне пришлось поместить внутреннюю таблицу в теги. Проблема в том, что я хочу, чтобы внутренняя таблица полностью перекрывала границы внешней таблицы сверху, слева и справа. Вот, посмотрите на этот JSFiddle:Две таблицы, перекрывающиеся границы

http://jsfiddle.net/26Fnm/15/

HTML:

<body> 
    <table class="main-body round"> 
    <tr><td class="nopad"> 
     <table class="header round"> 
      <tr> 
       <td class="header">Test Text 1</td> 
      </tr> 
      <tr> 
       <td class="header2">This is a longer test text two.</td> 
      </tr> 
     </table> 
     </td></tr> 
     <tr> 
      <td>Line 1</td> 
     </tr> 
     <tr> 
      <td>Line 2</td> 
     </tr> 
     <tr> 
      <td>Line 3</td> 
     </tr> 
     <tr> 
      <td>Line 4</td> 
     </tr> 
    </table> 
</body>

CSS:

body table.round 
{ 
    border:2px solid; 
    border-radius:25px; 
} 

.main-body td.header 
{ 
    text-align:left; 
    padding-left:50px; 
    color:white; 
    font-size:50px; 
} 

.main-body td.header2 
{ 
    text-align:right; 
    padding-right:30px; 
    color:white; 
    font-size:30px; 
} 

.nopad 
{ 
    border-spacing: 0px; 
    padding: 0px; 
} 

table.header 
{ 
    background-color:#151515; 
    width:100%; 
} 

.main-body 
{ 
    border-spacing: 0px; 
    border-collapse: separate; 
    color: #202020; 
    margin-left: auto; 
    margin-right: auto; 
    width: 600px; 
    background-color: #d2ffdc; 
    box-shadow: 10px 10px 10px #101010; 
} 

#navi 
{ 

}

Вы можете увидеть, в верхнем левом и правом углах, немного из зеленый цвет выходит между границами двух таблиц. Я не только хочу, чтобы это исчезло, я хочу, чтобы эти две границы, сверху, слева и справа, по существу были одной границей, они настолько перекрыты. Например, если бы я скопировал эти две таблицы друг на друга, и они были точно такой же ширины. Я пробовал интервал между границами, я не пробовал никаких дополнений, никаких полей, изменяя размер границ. Ничто не приблизило меня туда, где я хочу быть.

Возможно ли это? Или мне нужно согласиться на появление перекрытия с внутренней таблицей, не имеющей границы?

На стороне примечания, почему черт имеет код ссылки JSFiddle, сопровождающий его? Код есть на странице JSF!

источник

2014-02-14 Malkierian

ответ

0

Что-то вроде этого?

Fiddle

table, tr, td{ 
    border-collapse: collapse; 
} 

table.header2 
{ 
    background-color:#151515; 
    width:100%; 
    border-radius:20px; 
    padding: 0; 
    margin: 0; 

}

источник

2014-02-14 05:26:53 JunM

+0

Это, безусловно, о ближайшем я получил. Возможно, я мог бы сделать эту работу, но это было не совсем то, что я собирался сделать. Единственное изменение в этом, однако, состояло бы в том, чтобы граница на заголовке2 была видна снова, в верхней части границы для основного тела. – Malkierian

Смежные вопросы

 Смежные вопросы