CODEWITHSUNDEEP
htmlcsshtml-table
Mathew Magante
Mathew Magante

Reputation: 1407

How to make <td> fit to content

I want to fit table td I find this code make fit in first and last, but I don't know how to fit in second, third soon.

.table td {
  text-align: center;
}
.tr td:first-child{
  width:1%;
  white-space:nowrap;
}
.tr td:last-child{
  width:1%;
  white-space:nowrap;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table id="example1" class="table table-bordered table-hover">
  <thead>
    <th>HEAD1</th>
    <th>HEAD2</th>
    <th>HEAD3</th>
    <th>HEAD4</th>
    <th>HEAD5</th>
  </thead>
  <tbody>
    <tr>
      <td>DATA A</td>
      <td>DATA B</td>
      <td>DATA C</td>
      <td>DATA D</td>
      <td>DATA E</td>
    </tr>
  </tbody>
</table>

Image

enter image description here

Upvotes: 1

Views: 3130

Answers (1)

WebCoder
WebCoder

Reputation: 62

Try add some class to td which you want to get fit e.g.: <td class="fit"> and try:

tr td.fit {
    width:1%;
    white-space:nowrap;
}

OR you also can do: <table style="width: 4%; white-space: nowrap;">

Upvotes: 2

Related Questions