CSS代码：并且表格和父元素同宽好看的表格样式

你可以使用以下 CSS 代码来让表格和父元素同宽，同时美化表格样式：

table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

th,
td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f2f2f2;
}

这些代码将表格的宽度设置为100％，并消除了表格的边框间距。在表格头部和单元格中使用了一些样式来使其看起来更漂亮。

相关问题

CSS代码：好看的表格样式，表格和父元素同宽，还要能够手工调整列宽

可以尝试以下代码：

HTML:

<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>列1</th>
        <th>列2</th>
        <th>列3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>行1 列1</td>
        <td>行1 列2</td>
        <td>行1 列3</td>
      </tr>
      <tr>
        <td>行2 列1</td>
        <td>行2 列2</td>
        <td>行2 列3</td>
      </tr>
      <tr>
        <td>行3 列1</td>
        <td>行3 列2</td>
        <td>行3 列3</td>
      </tr>
    </tbody>
  </table>
</div>

CSS:

.table-wrapper {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

th,
td {
  padding: 8px;
  border: 1px solid #ccc;
  white-space: nowrap;
}

thead th {
  background-color: #f2f2f2;
}

td:first-child,
th:first-child {
  text-align: left;
}

th:not(:first-child),
td:not(:first-child) {
  cursor: col-resize;
}

th:hover:not(:first-child),
td:hover:not(:first-child) {
  background-color: #f2f2f2;
}

解释：

- `.table-wrapper` 作为容器，设置 `overflow-x: auto` 可以实现表格宽度超出容器时可以滚动查看。
- `table` 设置 `width: 100%` 和 `border-collapse: collapse` 使表格和其父元素同宽并去除边框之间的间隙。
- `th` 和 `td` 设置 `padding: 8px` 和 `border: 1px solid #ccc` 进行基本样式设置。
- `thead th` 设置 `background-color: #f2f2f2`，使表头背景色更明显。
- `td:first-child, th:first-child` 设置 `text-align: left`，使第一列左对齐。
- `th:not(:first-child), td:not(:first-child)` 设置 `cursor: col-resize`，使除第一列以外的单元格鼠标移动时变为可调整列宽的样式。
- `th:hover:not(:first-child), td:hover:not(:first-child)` 设置 `background-color: #f2f2f2`，使鼠标移动到除第一列以外的单元格时背景色变浅，增强可读性。

css样式中如何调整表格宽度

可以通过设置表格元素的宽度来调整表格宽度。常用的方法有：

1. 使用百分比：可以在表格元素的style属性中设置width属性，值为百分数，表示相对于父元素的宽度。例如：width:100%。

2. 使用像素值：可以在表格元素的style属性中设置width属性，值为像素值，表示具体的宽度。例如：width:500px。

3. 使用自动宽度：可以在表格元素的style属性中设置width属性为auto，表示根据内容自适应宽度。例如：width:auto。

示例代码：

<table style="width:100%;">
  <tr>
    <th style="width:20%;">姓名</th>
    <th style="width:30%;">年龄</th>
    <th style="width:50%;">地址</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京市朝阳区</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海市浦东新区</td>
  </tr>
</table>

上面的示例代码中，使用了百分比的方式，将表格设置为父元素的100%宽度。同时，也对表格的每个列设置了不同的宽度，保证了表格的整体美观。