Создать прозрачную таблицу HTML

Question

Я хотел бы создать таблицу HTML, как в этом примере.

Как я могу сохранить заголовок серый и сделать данные, чтобы выглядеть точно так же?

Answer 1

Вот рабочий фрагмент кода.

1. границы разнос удаляет интервал между ячейками
2. Tr: первый из-типа цели только первая строка, чтобы применить цвет фона
3. тд: только п-й ребенок (нечетные) цели первой колонке сделать все поля полужирный

table{ 
 
    border-spacing:0; 
 
} 
 

 
tr:first-of-type{ 
 
    background:lightgray; 
 
    } 
 

 
td:nth-child(odd){ 
 
    font-weight:bold; 
 
} 
 

 
th,td{ 
 
    padding:5px; 
 
}

<table> 
 
    <tr> 
 
    <td>Plan/Feature</td> 
 
    <td>Standard</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Plan Type</td> 
 
    <td>Annual</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Email Support</td> 
 
    <td>Yes</td> 
 
    </tr> 
 
</table>

Answer 2

Вы только что задали цвет фона для элементов, которые хотите, чтобы они отображались.

В этом нет ничего сложного.

table, tbody, tr, th, td { background: transparent; } 
thead { background: #aaa; } 

Answer 3

Попробуйте это:

CSS:

table { 
    border-collapse: collapse; 
} 

table th, table thead tr { 
    background: #ccc; 
    font-weight: bold; 
} 

table tr td:first-child { 
    font-weight: bold; 
} 

table tr td { 
    background-color: transparent; 
} 

Example HTML:

<table> 
    <thead> 
     <tr> 
      <th>Header 1</th> 
      <th>Header 2</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Column 1</td> 
      <td>Column 2</td> 
     </tr> 
     <tr> 
      <td>Column 1</td> 
      <td>Column 2</td> 
     </tr> 
    </tbody> 
</table> 

JSFiddle

Answer 4

применяются только серый цвет в м A ttribute! Также используйте таблицу {border-collapse: collapse;}, чтобы удалить пробелы между строками.

th{ 
 
    background-color:grey 
 
} 
 
table{ border-collapse:collapse;}

<table> 
 
    <tr> 
 
    <th>Header</th> 
 
    <th>Header2</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Body1</th> 
 
    <td>Body2</th> 
 
    </tr> 
 
</table>

Answer 5

Вы можете стиль заголовка таблицы с CSS

<table> 
    <tr> 
     <th>header</th> 
     <th>header</th> 
    </tr> 
    <tr> 
     <td>content</td> 
     <td>content</td> 
    </tr> 
</table> 

th { background-color: #ff0000; } 

Или увидеть эту скрипку: http://jsfiddle.net/h4817knp/6/

Edit: Для того, чтобы избежать пробелов в заголовке оных

table { border-collapse: collapse; } 

в CSS

http://jsfiddle.net/1yn99g13/1/

Answer 6

Вы должны, конечно, использовать CSS:

Вы должны избавиться от разноса по умолчанию в таблице:

table { 
    border-collapse: collapse; 
    border-spacing: 0; 
} 

Вам нужно для установки цвета фона элемента головки стола:

table thead { 
    background-color: lightgrey; 
} 

Вы должны определить ваши размеры ячеек:

td { 
    width: 100px; 
    height: 25px; 
} 

Working Fiddle

table { 
 
    border-collapse: collapse; 
 
\t border-spacing: 0; 
 
} 
 
td { 
 
    width: 100px; 
 
    height: 25px; 
 
} 
 
table thead { 
 
    background-color: lightgrey; 
 
}

<table> 
 
    <thead> 
 
     <tr> 
 
      <td>HeaderA</td> 
 
      <td>HeaderB</td> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td>Item 1</td> 
 
      <td>Value</td> 
 
     </tr> 
 
    </tbody> 
 
</table>