Question

table {
width:100%;
}
td {
padding:15px;
}

<table>
  <tr>
    <td>100</td>
    <td>20A long text</td>
    <td>300</td>
    <td>300</td>

  </tr>
  <tr>
    <td>400</td>
    <td>500</td>
    <td>600</td>
    <td>300</td>

  </tr>
</table>

单元格的内容可以是变化的长度，单元格的宽度将根据内容而定。它一定看起来像这样

| ---文本1 --- | ---很长的文本--- | ---文本3 --- |

但这就是现在的样子

|-文本1-- | -----非常长的文本----- |-文本3-- |

重申一下，我不希望单元格的宽度相等，但列之间的间距相等。

Answer 1

不幸的是，我不知道用纯CSS做到这一点的方法。
解决方法是，您可以使用JavaScript计算每个表格单元格达到100％宽度所需的宽度。

这是怎么开始的？请注意，我更改了CSS，将水平填充设置为0（这是必要的，否则您必须在JS计算中合并计算出的填充）；我给了单元格边框（这不是必需的，但是可以更好地证明所需的结果）。

let tbl = document.getElementById('tbl');
tbl.style.width = 'auto';
let extraSpace = document.body.clientWidth - tbl.offsetWidth;
let cols = tbl.rows[0].cells.length;
for (i = 0; i<cols; ++i) {
  let padding = Math.round(extraSpace/(cols-i));
  let cell = tbl.rows[0].cells[i];
  cell.style.width = (cell.clientWidth + padding) + 'px';
  extraSpace -= padding;
}

table {
  width: 100%;
}

td {
  padding: 15px 0;
  text-align: center;
  border:1px dotted gray;
}

<table id="tbl">
  <tr>
    <td>100</td>
    <td>20A long text</td>
    <td>300</td>
    <td>300</td>
  </tr>
  <tr>
    <td>400</td>
    <td>500</td>
    <td>600</td>
    <td>300</td>
  </tr>
</table>

Answer 2

如果您删除width:100%，则各列将拉伸以适合内容，其间的填充等于15px。目前，宽度为100％导致表格自动重新分配可用空间以填充屏幕的宽度。

Answer 3

使用CSS，您可以为padding-left和padding-right元素设置<td>和<th>，以设置列间距。

td, th {
  padding-left: 15px;
  padding-right: 15px;
}

<table border="1">
  <tr>
    <th>1st cell</th>
    <th>2nd cell</th>
    <th>3rd cell</th>
  </tr>
  <tr>
    <td>1st cell content</td>
    <td>2nd cell content</td>
    <td>3rd cell content</td>
  </tr>
</table>

Answer 4

请在接下来的问题中提供您的代码。
您可以将CSS属性 table-layout：fixed; 添加到表格标签

固定属性：设置固定表布局算法。表格和列的宽度由表格和col的宽度或单元格第一行的宽度设置。其他行中的单元格不影响列宽。如果第一行没有宽度，则无论单元格内的内容如何，列的宽度将在表格中平均分配

此外，您可以为单元格设置固定的填充（左右），以使左右固定的空格保持不变
这是一个例子

upladingVideo = () =>  {
    RNFetchBlob.fetch('POST', YOUR_API_URL, {
         'content-type': 'multipart/form-data',
         "Accept":"multipart/form-data",
      },[
        {name: YOUR_VARIABLE_NAME, filename: ‘myvidoe.mp4', data: RNFetchBlob.wrap(YOUR_LOCAL_VIDEO_URL) },
      ]).then(response => response.json())
        .then(response => {
            if (response.status === 'success') {
                // If you will get a success response from your api
                alert(‘Video is uploaded successfully’);
            } else {
               alert(‘Something went wrong’);
            }})
         .catch((err) => {
             alert(err);
        })
    }

结果

希望对您有所帮助。
Hele

表格元素内两列之间的间距相等

4 个答案: