1. 首页
  2. 问题列表
  3. 如何创建带边框的全宽HTML表格？
提问者：小点点

如何创建带边框的全宽HTML表格？


当前HTML:

null

    <section class="Product-Info">
      <table>
        <tr>
          <th colspan="2">Product Infromation</th>
        </tr>
        <tr>
          <th>Product Name:</th>
          <td>Name</td>
        </tr>
        <tr>
          <th>Product Description:</th>
          <td>Description</td>
        </tr>
      </table>
    </section>

null

所需:

问题:

我如何添加边框和宽度到我的当前HTML与CSS作为期望的结果？

我所尝试的

我尝试了以下CSS:

  table {
    border: 1px solid black;
  }

这只是在桌子周围放了一个边框。 我怎样才能把它添加得与所需得一样呢？


共3个答案

匿名用户

null

table {
  border-collapse: collapse;
  /* if you don't add this line you will see "double" borders */
  border: 1px solid black;
  width: 100vw;
}

th{
color: white;
background-color: blue;
}

td{
background-color: white;
width: 70%;
}

td, th {
  border: 1px solid black;
}
<section class="Product-Info">
  <table>
    <tr>
      <th colspan="2">Product Infromation</th>
    </tr>
    <tr>
      <th>Product Name:</th>
      <td>Name</td>
    </tr>
    <tr>
      <th>Product Description:</th>
      <td>Description</td>
    </tr>
  </table>
</section>

匿名用户

非常简单，在您的示例中，您只需将所需的背景颜色应用于表头单元格(th)，如下所示:

    th {
    background: darkblue;
    color: white; /* Assuming you don't want black text on dark blue. */ 
    }

要使表格单元格周围的标准边框消失，您必须简单地折叠主表格元素上的边框，如下所示:

    table {
    border-collapse: collapse;
    }

有了这个设置，你现在可以应用任何你想要的边框样式到你的桌子，在任何厚度，颜色和风格你想要的。

匿名用户

简单地说:


table {
border-collapse: collapse; /* if you don't add this line you will see "double" borders */
border: 1px solid black;
}

table th,
table td {
text-align: left;
border: 1px solid black;
}

这里演示https://jsfiddle.net/3hpks1ml/

相关问题