Question

所以我有一个我想要做的设计。它依赖于一个表，其行宽占据表的整个宽度。

我有一个边框底部，其边框延伸到桌子的整个宽度。

如何正确修改边框的宽度（水平跨度），使其仅覆盖表格宽度的整个宽度的百分比？

我现在有这个（表格行）

+---------------+
|   table row   |
+===============+

我想更改等号字符（边框底部宽度小于表格的整个宽度）

+---------------+
|   table row   |
+  ===========  +

请注意，=是边框底部。

是否有控制行底部宽度或是否需要在tbody内使用填充/边距？

Answer 1

我会用这个

 <div class="inner">&nbsp;</div>

风格

.inner {
    width: 80%;
    height: 1px;
    margin: 0px auto;
    border-bottom: 1px solid #969696;
}

你把这个div放在td

的内容中

Answer 2

如果没有看到你的表格标记，我假设你在每一行中都有多个单元格（或者它更像是一个列表而不是一个表格）。我能想到的最直接的方法是使用表格最后一行的<td>单元格来携带边框。第一个和最后一个单元格没有border-bottom集，而其中的所有<td>元素都没有。

您可以应用此CSS，只需对现有表进行最少的更改：

tbody tr:last-child td {
  border-bottom: 1px solid black;
}

tbody tr:last-child td:first-of-type,
tbody tr:last-child td:last-of-type {
  border-bottom-width: 0;
}

然而，这并不能让您对底部边框的宽度进行特别有限的控制，因为宽度与那些非外部单元格的内容相关联。如果这很重要，您可以使用::after伪元素来显示边框：

table {
  position: relative;
}

table::after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 50%;
  margin-left: -30% // adjust for desired width
  width: 60%; // adjust for desired width
  height: 1px;
  border-bottom: 1px solid black;
}

Answer 3

你可以做这样的事。尝试操纵＆＃39; hr＆＃39;作为你的桌边 - 底部。欢呼声。

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  width:500px;
    border-left: 1px red solid;
    border-top: 1px red solid;
    border-right: 1px red solid;
}
.box{
    width:500px;
}
.box hr{
    background-color: red;
    margin: 0px auto;
    width: 300px;
    border-bottom: 1px solid #ccc;
    height: 1px;
    border: 0;
    padding: 0;
}
</style>
</head>
<body>

<h2>Add a border to a table:</h2>

<div class="box">
 <table >
  <tbody><tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Peter</td>
    <td>Griffin</td>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</tbody></table>
    <hr/>
</box>



</body>
</html>

＆＃13;

如何使表格行边框底部不跨越表格的整个宽度？

3 个答案: