Html 使表格的宽度等于其在css中的列的宽度

发布于06月18日

我动态地得到一个html模板，其中有一个表.

这是我的html.可以有不同数量的列

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>

推荐答案

如果我理解正确，那么您只需要在CSS中"重置"表格宽度.您可以通过在CSS中添加width: auto !important;来实现这一点.以下示例:

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>