CODEWITHSUNDEEP
htmlcss
Ellen
Ellen

Reputation: 117

make the width of the table equal to the width of its columns in css

I dynamically get an html template that has a table in it. The table in the tag already has a set width. In addition, it has one column with its own width. I can't control the width in the template tags in any way. It turns out that the width of the table is greater than the width of its columns. Is there any way to make the width of the table equal to the width of its columns in css?

Here's my html. There can be different numbers of columns

table.quill-better-table {
  border: 1px solid black;
  border-collapse: collapse;
  margin-left: 1.25cm;
}

table.quill-better-table th,
table.quill-better-table td {
  border: 1px solid black;
  border-collapse: collapse;
}
<div class="quill-better-table-wrapper">
  <table class="quill-better-table" style="width: 246px;">
    <colgroup>
      <col width="79">
    </colgroup>
    <tbody>
      <tr data-row="row-k92p">
        <td data-row="row-k92p" rowspan="1" colspan="1">
          <p class="qlbt-cell-line" data-row="row-k92p" data-cell="cell-xmmy" data-rowspan="1" data-colspan="1">ыаыа</p>
        </td>
      </tr>
      <tr data-row="row-7299">
        <td data-row="row-7299" rowspan="1" colspan="1">
          <p class="qlbt-cell-line" data-row="row-7299" data-cell="cell-x0mt" data-rowspan="1" data-colspan="1"><br></p>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Upvotes: 2

Views: 204

Answers (1)

Oleg Barabanov
Oleg Barabanov

Reputation: 2764

If I understand you correctly, then you just need to "reset" the table width in CSS. You can do this by adding width: auto !important; to the CSS. Example below:

table.quill-better-table {
  border: 1px solid black;
  border-collapse: collapse;
  margin-left: 1.25cm;
  width: auto !important;
}

table.quill-better-table th,
table.quill-better-table td {
  border: 1px solid black;
  border-collapse: collapse;
}
<div class="quill-better-table-wrapper">
  <table class="quill-better-table" style="width: 246px;">
    <colgroup>
      <col width="79" />
      <col />
    </colgroup>
    <tbody>
      <tr data-row="row-k92p">
        <td data-row="row-k92p" rowspan="1" colspan="1">
          <p class="qlbt-cell-line" data-row="row-k92p" data-cell="cell-xmmy" data-rowspan="1" data-colspan="1">example with "width = 79"</p>
        </td>
        <td data-row="row-k92p" rowspan="1" colspan="1">
          <p class="qlbt-cell-line" data-row="row-k92p" data-cell="cell-xmmy" data-rowspan="1" data-colspan="1">example without "width"</p>
        </td>
      </tr>
      <tr data-row="row-7299">
        <td data-row="row-7299" rowspan="1" colspan="1">
          <p class="qlbt-cell-line" data-row="row-7299" data-cell="cell-x0mt" data-rowspan="1" data-colspan="1"><br></p>
        </td>
        <td data-row="row-7299" rowspan="1" colspan="1">
          <p class="qlbt-cell-line" data-row="row-7299" data-cell="cell-x0mt" data-rowspan="1" data-colspan="1"><br></p>
        </td>
      </tr>
    </tbody>
  </table>
</div>

Upvotes: 1

Related Questions