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

给文本一个简单的跨度或任何其他块元素，如div p ... span with 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＆gt;像这样进入你的桌子

<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主题类似的问题。 ＆＃34;崩溃＆＃34;没有完全在第一栏上工作，因为我的主题是style.css＆＃34;重置＆＃34;将表格宽度设置为100％。至少对我而言，＆＃34; auto＆＃34;宽度解决了这个问题。

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

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