2009-06-26 6 views
2

Я пытаюсь создать таблицу с черной рамкой 1px.Вложенные таблицы: граница 1px с css

Мне нужно разложить стол в главном столе и получить «толстые» границы, где следующий стол прикладается к его закрытию <td>. Мне просто нужна граница 1px.

У меня есть это, по сути:

table.outer{border:1px black solid; border-collapse: collapse;} 
td{border:1px black solid; border-collapse: collapse;} 
table.nexted{border:1px black solid; border-collapse: collapse;} 

ответ

1

Просто поместите атрибут границы на td с. Если вам нужна граница 1px, это будет сделано; вам это не нужно на таблицах.

2

Если вы правильно поняли, вы можете использовать граничные, левые, правые, граничные и нижние границы для создания этих «специальных» случаев, которые вы хотите.

Например, в ваших вложенных таблицах вы можете установить

border-left:0; 

, чтобы получить «в результате» 1 пикс границы в левой части вложенной таблицы.

1

эта страница описывает, как сделать это очень хорошо: http://www.visakopu.net/misc/table-border-css/

То, что происходит в том, что границы на клетки натыкаясь друг против друга, заставляя его казаться, что есть толстые границы, чем на самом деле. Вместо использования свойства border-collapse вы устанавливаете границу на самой таблице и только на, скажем, на верхнюю и левую стороны, и вы устанавливаете границы в нижней и правой частях ячеек.

2

не дают стиль границы для вложенной таблицы

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <style type="text/css"> 
     table.outer 
     { 
      border: 1px black solid; 
      border-collapse: collapse; 
      width: 100%; 
     } 
     table.outer td 
     { 
      border: 1px black solid; 
      border-collapse: collapse; 
     } 
     table.nested, table.nested td 
     { 
      border-width: 0px; 
      border-collapse: collapse; 
      width: 100%; 
     } 
    </style> 
</head> 
<body> 
    <table class="outer"> 
     <tr> 
      <td> 
       <table class="nested"> 
        <tr> 
         <td> 
          &nbsp; 
         </td> 
         <td> 
          &nbsp; 
         </td> 
        </tr> 
        <tr> 
         <td> 
          &nbsp; 
         </td> 
         <td> 
          &nbsp; 
         </td> 
        </tr> 
       </table> 
      </td> 
      <td> 
       content 
      </td> 
     </tr> 
     <tr> 
      <td> 
       content 
      </td> 
      <td> 
       <table class="nested"> 
        <tr> 
         <td> 
          &nbsp; 
         </td> 
         <td> 
          &nbsp; 
         </td> 
        </tr> 
        <tr> 
         <td> 
          &nbsp; 
         </td> 
         <td> 
          &nbsp; 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 
</body> 
</html> 
Смежные вопросы