CODEWITHSUNDEEP
htmlcss
Arshad Rehmani
Arshad Rehmani

Reputation: 2185

make width of <td> equal to its text contents

I have below snippet where td takes up space unnecessarily. For e.g. if the text contents inside td take 20 pixels width, td should also be 20 pixels wide. Can you help me fix it?

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;
}
<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>

Upvotes: 0

Views: 2265

Answers (3)

Hardik Chapla
Hardik Chapla

Reputation: 434

Please replace this code with your old code.

I hop here you find your solution.

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;
}
<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>

Upvotes: 1

Danield
Danield

Reputation: 125523

By default, table cells will expand in order to fit all their content and the width of the cell will depend on the widest cell in that column.

So trying to shrink-wrap a table-cell doesn't really make much sense.

If you do actually want a table-like layout, but you want a particular column to take up as little space as possible - you could set the cell width: 1px; - that will make the column as wide as the longest word in the cells of that column.

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>

Upvotes: 1

Chandra Shekhar
Chandra Shekhar

Reputation: 3749

try adding the following css code

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

here is a link for reference

hope this helps..

Upvotes: 0

Related Questions