Question

我尝试在<td>标记内添加一条水平线来实现：

This is what I want

但这就是我得到的：

This is what I get

这是一个jsfiddle：http://jsfiddle.net/6qybn8w8/

请注意，我希望此<hr />标记仅出现在<td>中的少数几个中，而不是全部。此外，我无法移除<td>的填充，因为我需要它来格式化其他<td>s的内容

Answer 1

你可以做这样的事情。

table {
  border: 3px solid #0D94D2;
}
table th,
td {
  padding: 4px 10px 4px 5px;
  font-size: 12px;
}
table th {
  background-color: #0D94D2;
  text-align: center;
  padding: 0.25em 0.25em;
  white-space: nowrap;
}
table td {
  width: auto;
  text-align: center;
  border-bottom: 1px solid #B1DCEA;
  white-space: nowrap;
}
hr {
  position: relative;
  color: #0000FF;
  background-color: #0000FF;
  height: 0.75em;
  width: 118.9%;
  left: -6.5%;
}

<body>
  <table>
    <th>
      Data
    </th>
    <tr>
      <td>
        <hr />
        <div>
          Some Gibber Gabber
        </div>
      </td>
    </tr>
  </table>
</body>

Answer 2

在不破坏结构的情况下获得预期结果的一种解决方法是使用定位。

我已经更新了小提琴，以便您可以完成更改http://jsfiddle.net/6qybn8w8/2/

<强> HTML：

<body>
   <table>
       <th>
           Data
       </th>
       <tr>
       <td>
           <hr />
           <div>
           Some Gibber Gabber
           </div>
       </td>
       </tr>
    </table>
</body>

<强> CSS

table{
   border:3px solid #0D94D2;
}

table th,td{
    padding: 4px 10px 4px 5px; font-size: 12px;
}

table th{
    background-color:#0D94D2;text-align:center;padding:0.25em 0.25em;white-space:nowrap;
}
table td{
    width:auto;text-align:center;border-bottom: 1px solid #B1DCEA;white-space:nowrap;position:relative;
}

table td div{
    margin-top:10px;
}

hr{
    color: #0000FF;
    background-color: #0000FF;
    height: 0.75em;
    position:absolute;
    width:100%;
    top:-10px;
    left:-1px;
}

Answer 3

将<hr>的高度设置为0并将margin-top添加到5px或您想要的任何内容。

＆＃13;

table{
   border:3px solid #0D94D2;
}

table th,td{
    padding: 4px 10px 4px 5px; font-size: 12px;
}

table th{
    background-color:#0D94D2;text-align:center;padding:0.25em 0.25em;white-space:nowrap;
}
table td{
    width:auto;text-align:center;border-bottom: 1px solid #B1DCEA;white-space:nowrap;
}

hr{
    height: 0em;
    border-top: 5px solid green;
    margin: 0;
    width: 100%;
}

＆＃13;

<body>
   <table>
       <th>
           Data
       </th>
       <tr>
       <td>
           <hr />
           <div>
           Some Gibber Gabber
           </div>
       </td>
       </tr>
    </table>
</body>

＆＃13;

更新了jsFiddle：http://jsfiddle.net/rdesai/6qybn8w8/5/

如何在保持内容居中的同时添加<hr />？

3 个答案: