Question

想为TABLE元素编写CSS样式类以获得网格状的外观，以及它过去在属性'border = 1'中的显示方式。

如果我在类中定义了该样式，则该样式仅适用于我打算以网格格式显示数据的表。

Answer 1

像这样吗？

1）分配您要为id设置样式的表（在下面我给了它id my-styled-table

2）根据需要设置表格样式

请注意，如果您不希望多个表具有相同的设计，请使用class代替id

#my-styled-table {
  border: 2px solid black; /* The whole table get a border */
}

#my-styled-table th {
  border: 1px solid black; /* The header columns gets a border */
}

<table id="my-styled-table">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
   </tr>
   <tr>
    <td>Data 1a</td>
    <td>Data 1b</td>
   </tr>
   <tr>
    <td>Data 2a</td>
    <td>Data 2b</td>
   </tr>
   <tr>
    <td>Data 3a</td>
    <td>Data 3b</td>
   </tr>
   <tr>
    <td>Data 4a</td>
    <td>Data 4b</td>
   </tr>
  </table>

替代TABLE的边框

1 个答案: