html - CSS 限制表格单元格 TD 内容的边框

Question

大家好，我只是想在文本周围的表格单元格周围设置边框……而不是拉伸整个表格的长度。它周围有边框的部分

CSS：

table.content_table {
width: 100%;
margin: 0px;
border-collapse: collapse;
}
table.content_table > tbody > tr > td.results {
border: 2px solid;
background-color: #eeeecc;
font-size: 8pt;
font-weight: bold;
PADDING: 0px;

}

HTML：

    <table class="content_table">
    <br/><br/>
     <h1>Planned Vs Actual Productions Drilldown</h1>


            <tr>
            <td class="results">
         Number of results returned:  ${fn:length(beans)}
        </td>
        </tr>

Answer 1

答案在于您的表格宽度为 100%。如果没有 TD 级别的任何样式，TD 会自动采用它所能达到的最大宽度。

不过，更大的问题是你为什么要使用一张桌子。这是单列数据，这里不需要表格，用div就行了。

Answer 2

给文本一个简单的 span 或任何其他块元素，如 div p ... span 与 inline-block 也是可以有边框的块元素。

table.content_table {
  width: 100%;
  margin: 0px;
  border-collapse: collapse;
}
.border {
  border: 2px solid;
  background-color: #eeeecc;
  font-size: 8pt;
  font-weight: bold;
  PADDING: 0px;
  display: inline-block;
}   

表中的任何元素都需要在 TD 中，这样才是有效的 html... 像这样将另一个 tr > td 放入您的表中

<table class="content_table">
<tr>
   <td>
     <h1>Planned Vs Actual Productions Drilldown</h1>
   </td>
</tr>
  <tr>
    <td class="results">
        <span class="border">Number of results returned:  ${fn:length(beans)}</span>
    </td>
    </tr>
</table>

Answer 3

我在 WordPress 主题上遇到了类似的问题。“折叠”并不完全适用于第一列，因为我的主题 style.css “重置”已将表格宽度设置为 100%。至少对我来说，“自动”宽度解决了这个问题。

<style>
  table#donations { border-collapse: collapse; width:auto; }
</style>

<table id="donations">
  <tr><td>Bitcoin BTC</td><td>1Prh5VnUJRQV3sARhEfQAMKv9UzGqgAMXg</td></tr>
</table>