Question

我在下面的片段中td占用了不必要的空间。对于例如如果td内的文字内容宽度为20像素，则td也应为20像素宽。你能帮我解决一下吗？

＆＃13;

tr {
  width: 100%;
}
.td2{
   width:auto;
   max-width: 180px;
   word-wrap: break-word;
   background-color:red;
   padding-left: 0;
   padding-right: 0;
}

span {
   background-color: #7e7;
}

＆＃13;

<h3 style="width:600px;">The image in below strucure should be displayed immediately after text ends
but the td is eating up space unnecessarily
</h3>

<table>
  <tr>
    <td class="td1"><input type="checkbox" name="checkbox" value="value"></td>
    <td class="td2"><span>Excessive exhaust materialssss</span></td>
    <td class="td3"><img src="https://www.w3schools.com/html/smiley.gif"></td>
  </tr>
  <tr>
    <td class="td1"><input type="checkbox" name="checkbox" value="value"></td>
    <td class="td2"><span>Excessive</span></td>
    <td class="td3"><img src="https://www.w3schools.com/html/smiley.gif"></td>
  </tr>
</table>

＆＃13;

Answer 1

请用旧代码替换此代码。

我跳到这里找到你的解决方案。

＆＃13;

tr {
  width: 100%;
  display:table-row;
}
tr td
{
  display:inline-block;
}
.td2{
   width:auto;
   word-wrap: break-word;
   background-color:red;
   padding-left: 0;
   padding-right: 0;
   
   max-width: 180px;
}
.text{
  max-width: 180px;
  font-size: 14px;
}
span {
   background-color: #7e7;
}

＆＃13;

<h3 style="width:600px;">The image in below strucure should be displayed immediately after text ends
but the td is eating up space unnecessarily
</h3>

<table>
  <tr>
    <td class="td1"><input type="checkbox" name="checkbox" value="value"></td>
    <td class="td2"><span class="text">Excessive exhaust materialssss</span></td>
    <td class="td3"><img src="https://www.w3schools.com/html/smiley.gif"></td>
  </tr>
  <tr>
    <td class="td1"><input type="checkbox" name="checkbox" value="value"></td>
    <td class="td2"><span>Excessive</span></td>
    <td class="td3"><img src="https://www.w3schools.com/html/smiley.gif"></td>
  </tr>
</table>

＆＃13;

Answer 2

尝试添加以下css代码

tr {
  width: 100%;
  display:table-row;
}
tr td
{
  display:inline-block;
}

here is a link for reference

希望这会有所帮助..

Answer 3

默认情况下，表格单元格将展开以适合其所有内容，单元格的宽度将取决于该列中最宽的单元格。

因此，尝试收缩包装表格单元并没有多大意义。

如果你确实想要一个类似于表格的布局，但是你希望特定的列占用尽可能少的空间 - 你可以设置单元格width: 1px; - 这将使列尽可能宽该列的单元格中的单词。

table {
  table-layout: fixed;
}

tr {
  width: 100%;
}
.td2{
   width:auto;
   max-width: 180px;
   word-wrap: break-word;
   background-color:red;
   padding-left: 0;
   padding-right: 0;
   width: 1px; /* <--- */
}

span {
   background-color: #7e7;
}

<h3 style="width:600px;">The image in below strucure should be displayed immediately after text ends
but the td is eating up space unnecessarily
</h3>

<table>
  <tr>
    <td class="td1"><input type="checkbox" name="checkbox" value="value"></td>
    <td class="td2"><span>Excessive exhaust materialssss</span></td>
    <td class="td3"><img src="https://www.w3schools.com/html/smiley.gif"></td>
  </tr>
  <tr>
    <td class="td1"><input type="checkbox" name="checkbox" value="value"></td>
    <td class="td2"><span>Excessive</span></td>
    <td class="td3"><img src="https://www.w3schools.com/html/smiley.gif"></td>
  </tr>
</table>

使宽度等于其文本内容

3 个答案: