Html 如何添加<；人力资源>；到a<；td>；在保持内容中心的同时？_Html_Css

Html 如何添加<；人力资源>；到a<；td>；在保持内容中心的同时？

html css

Html 如何添加<；人力资源>；到a<；td>；在保持内容中心的同时？,html,css,Html,Css,我试图在标记内添加一条水平线，以实现：但我得到的是：下面是一个JSFIDLE：请注意，我希望这个标记只出现在的少数部分，而不是全部。另外，我无法删除的填充，因为我需要它来格式化其他的内容您可以这样做表格{ 边框：3px实心#0D94D2； } 表th，运输署{ 填充：4px10px 4px5px；字体大小：12px； } 表th{ 背景色：#0D94D2；文本对齐：居中；填充：0.25em 0.25em；空白：nowrap； } 表td{ 宽度：自动；文本对齐：居中；

我试图在

标记内添加一条水平线，以实现：

但我得到的是：

下面是一个JSFIDLE：

请注意，我希望这个

标记只出现在

的少数部分，而不是全部。另外，我无法删除

的填充，因为我需要它来格式化其他

的内容
您可以这样做

表格{
边框：3px实心#0D94D2；
}
表th，
运输署{
填充：4px10px 4px5px；
字体大小：12px；
}
表th{
背景色：#0D94D2；
文本对齐：居中；
填充：0.25em 0.25em；
空白：nowrap；
}
表td{
宽度：自动；
文本对齐：居中；
边框底部：1px实心#B1DCEA；
空白：nowrap；
}
人力资源{
位置：相对位置；
颜色：#0000FF；
背景色：#0000FF；
高度：0.75em；
宽度：118.9%；
左-6.5%；
}

资料

胡言乱语
在不破坏结构的情况下获得预期结果的一个解决方法是使用定位
我已经更新了小提琴，这样你就可以进行修改了
HTML:
<body>
   <table>
       <th>
           Data
       </th>
       <tr>
       <td>
           <hr />
           <div>
           Some Gibber Gabber
           </div>
       </td>
       </tr>
    </table>
</body>

将
的高度设置为0，并将边距顶部添加到5px
或任何您想要的位置

表格{
边框：3px实心#0D94D2；
}
表th，td{
填充：4px10px 4px5px；字体大小：12px；
}
表th{
背景色：#0D94D2；文本对齐：居中；填充：0.25em 0.25em；空白：nowrap；
}
表td{
宽度：自动；文本对齐：居中；边框底部：1px实心#B1DCEA；空白：nowrap；
}
人力资源{
高度：0em；
边框顶部：5px纯绿色；
保证金：0；
宽度：100%；
}

资料

胡言乱语
编辑了JSFIDLE链接，尝试在CSS中设置该链接的样式。我从填充开始：0和边距：0自动。
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;
}