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

Posted 2023-03-06

【中文标题】表格宽度在 Firefox html 上无法按预期工作

【英文标题】：Table width not working as expected on Firefox html

【发布时间】：2021-01-28 14:53:59

【问题描述】：

我很困惑为什么无法将 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  class="heads">ID Number</th>
                  <th class="heads">Name</th>
                  <th  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>1235</td>
                  <td>Jason</td>
                  <td>United States</td>
                  <td class="lenss"></td>
                </tr>

              </tbody>
            </table>

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

【问题讨论】：

您可以将我制作的 sn-p 编辑为 minimal reproducible example - 有很多打印代码似乎与您的问题无关？

@mplungjan 但在 Firefox 中我的国家的宽度在 chrome 中不一样

试试wbr

@mplungjan 但让我们假设我有动态值我认为我不能使用 wbr

【参考方案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  class="heads">ID Number</th>
                  <th class="heads">Name</th>
                  <th  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>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  class="heads">ID Number</th>
      <th class="heads">Name</th>
      <th  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>

【讨论】：

感谢您的回复，但您知道如何仅在列国家/地区设置宽度吗？我认为它会影响其他 td tbody 和 th 以上 sn-p 谢谢

如果没有“-”数据来替换，例如 ID 号为 1235，我想替换那些使用 wbr ang 拆分为 2 列的数据，第一行和第二行的输出应为 12 35有可能吗？

是的。我不太明白你所说的列是什么意思。如果你想要列，你会想要拆分并加入</td><td>

我的意思是像上一行一样分成两行，之前如果td中有“-”你已经替换了它但是如果我们只基于文本的长度呢？ ，比如上面ID号1235的sn-p，我想在第一行分隔12，第二行是35你知道怎么写成javascript吗？我已经尝试过了，但它不起作用，请提前谢谢你。

见第二个例子