表格宽度在 Firefox html 上无法按预期工作

Question

我很困惑为什么无法将 Firefox 浏览器上的表格宽度编辑为最小值，但是当我使用 Chrome 浏览器时它可以工作，我只想将我的 td 的值分成三行，如下图所示但在 Firefox 中。

在正在工作的 chrome 中

在不工作的 Firefox 中

整个 HTML

<section class="users-list-wrapper">

  <div class="users-list-table">
    <div class="card">
      <div class="card-content">
        <div class="card-body">

          <div class="table-responsive">

            <table class="table" name="table" id="table">
              <thead>
                <tr>
                  <th colspan="9">
                    <div class="titles">
                      <h3>This is Header title <br style="line-height: 20%;">
                        <span class="header2"> SubHeader title</span>
                    </div>
                  </th>
                </tr>
                <tr>
                  <th colspan="4" style="text-align: left;">
                    <span class="municipality">Header</span>
                  </th>
                </tr>
                <tr class="heads">
                  <th class="heads">No</th>
                  <th width="5%" class="heads">ID Number</th>
                  <th class="heads">Name</th>
                  <th width="2%" class="heads">Country</th>
                  <th class="heads">Data total</th>
                </tr>
              </thead>
              <tbody class="report-content">
                <tr>
                  <td></td>
                  <td>1235</td>
                  <td>Jason</td>
                  <td width="10px;">PH-COVID-160203000-00010165</td>
                  <td class="lenss"></td>
                </tr>
                <tr>
                  <td></td>
                  <td>1235</td>
                  <td>Jason</td>
                  <td>United States</td>
                  <td class="lenss"></td>
                </tr>

              </tbody>
            </table>

          </div>
        </div>
      </div>
    </div>
</section>

Answer 1

试试wbr - 你可以动态地做到这一点

[...document.querySelectorAll("tbody tr td")].forEach(td => {
  const text = td.textContent;
  if (text.length > 20 && text.indexOf("-") != -1) td.innerHTML = text.replace(/-/g, "<wbr/>-")
})

<section class="users-list-wrapper">

  <div class="users-list-table">
    <div class="card">
      <div class="card-content">
        <div class="card-body">

          <div class="table-responsive">

            <table class="table" name="table" id="table">
              <thead>
                <tr>
                  <th colspan="9">
                    <div class="titles">
                      <h3>This is Header title <br style="line-height: 20%;">
                        <span class="header2"> SubHeader title</span>
                    </div>
                  </th>
                </tr>
                <tr>
                  <th colspan="4" style="text-align: left;">
                    <span class="municipality">Header</span>
                  </th>
                </tr>
                <tr class="heads">
                  <th class="heads">No</th>
                  <th width="5%" class="heads">ID Number</th>
                  <th class="heads">Name</th>
                  <th width="2%" class="heads">Country</th>
                  <th class="heads">Data total</th>
                </tr>
              </thead>
              <tbody class="report-content">
                <tr>
                  <td></td>
                  <td>1235</td>
                  <td>Jason</td>
                  <td width="10px;">PH-COVID-160203000-00010165</td>
                  <td class="lenss"></td>
                </tr>
                <tr>
                  <td></td>
                  <td>1235</td>
                  <td>Jason</td>
                  <td>United States</td>
                  <td class="lenss"></td>
                </tr>

              </tbody>
            </table>

          </div>
        </div>
      </div>
    </div>
</section>

火狐：

铬：

要拆分内容的长度，您可以使用正则表达式

[...document.querySelectorAll("tbody tr td")].forEach(td => {
  const text = td.textContent;
  // if the text has dashes but no spaces
  if (text.length > 20 && text.indexOf(" ") == -1 && text.indexOf("-") != -1) {
    td.innerHTML = text.replace(/-/g, "<wbr/>-")
  } else if (text.length >= 10) { 
    // see if there are words > 10 
    td.innerHTML = text.replace(/(\w+)/, function(match, word, index) {
      return word.length<10 ? word : word.split(/(.{10})/).filter(O => O).join("<wbr/>-")
    })
  }
})

<table class="table" name="table" id="table">
  <thead>
    <tr>
      <th colspan="9">
        <div class="titles">
          <h3>This is Header title <br style="line-height: 20%;">
            <span class="header2"> SubHeader title</span>
        </div>
      </th>
    </tr>
    <tr>
      <th colspan="4" style="text-align: left;">
        <span class="municipality">Header</span>
      </th>
    </tr>
    <tr class="heads">
      <th class="heads">No</th>
      <th width="5%" class="heads">ID Number</th>
      <th class="heads">Name</th>
      <th width="2%" class="heads">Country</th>
      <th class="heads">Data total</th>
    </tr>
  </thead>
  <tbody class="report-content">
    <tr>
      <td></td>
      <td>1235</td>
      <td>Jason</td>
      <td>PH-COVID-160203000-00010165</td>
      <td class="lenss"></td>
    </tr>
    <tr>
      <td></td>
      <td>1235longstring</td>
      <td>Jason</td>
      <td>United States</td>
      <td class="lenss"></td>
    </tr>
  </tbody>
</table>