Question

这听起来像是一个基本问题。我知道如何使用 width 标记设置列宽。并使用 CSS 。

拿这个HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta content="en-gb" http-equiv="Content-Language">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Untitled 1</title>
<style type="text/css">
.tableStyle {
    border-collapse: collapse;
    border: 1px solid #000000;
}
</style>
</head>

<body>

<table class="tableStyle" style="width: 100%">
    <tr>
        <td>This is long text</td>
        <td>Date Column</td>
        <td>Date Column</td>
    </tr>
    <tr>
        <td>This is long text</td>
        <td>Date Column</td>
        <td>Date Column</td>
    </tr>
    <tr>
        <td>This is long text</td>
        <td>Date Column</td>
        <td>Date Column</td>
    </tr>
    <tr>
        <td>This is long text</td>
        <td>Date Column</td>
        <td>Date Column</td>
    </tr>
</table>

</body>

</html>

如果可能，我想要做的是将第2列和第3列设置为显示这些列的内容所需的大小。并且第1列扩展到适合。

现在，我知道我可以将最后两列设置为每个10％。如果我将表格宽度设置为100％，那么第1列将展开以适应。

但是，由于此HTML模板将用于30多种语言，因此列标题在某些语言中包含更多字符。此外，如果更改了字体大小，它也会将其丢弃。

那么有没有办法让最后两列自动调整大小到内容，第一列扩展到适合？

谢谢。

安德鲁

Answer 1

使用table { width: 100%; }标记表示表格中的每一列，并使用该标记。以下是两种不同的方法：

将第一列的宽度设置为100％

＆＃13;

<table border="1">
  <col style="width: 100%">
  <col>
  <col>
  <tr>
    <td>This is long text</td>
    <td>Date Column</td>
    <td>Date Column</td>
  </tr>
  <tr>
    <td>This is long text</td>
    <td>Date Column</td>
    <td>Date Column</td>
  </tr>
  <tr>
    <td>This is long text</td>
    <td>Date Column</td>
    <td>Date Column</td>
  </tr>
  <tr>
    <td>This is long text</td>
    <td>Date Column</td>
    <td>Date Column</td>
  </tr>
</table>

＆＃13;

table {
  width: 100%;
}

＆＃13;

设置其他两列的宽度

＆＃13;

<table border="1">
  <col>
  <col style="width: 11%">
  <col style="width: 11%">
  <tr>
    <td>This is long text</td>
    <td>Date Column</td>
    <td>Date Column</td>
  </tr>
  <tr>
    <td>This is long text</td>
    <td>Date Column</td>
    <td>Date Column</td>
  </tr>
  <tr>
    <td>This is long text</td>
    <td>Date Column</td>
    <td>Date Column</td>
  </tr>
  <tr>
    <td>This is long text</td>
    <td>Date Column</td>
    <td>Date Column</td>
  </tr>
</table>

＆＃13;

-(RACSignal *)executeCheckChange {
    return [RACObserve(self, cellViewModels)
            map:^id(NSArray *viewModels) {
                for (id viewModel in viewModels) {
                    if([viewModel isKindOfClass:[STContactDetailsPhoneCellViewModel class]])
                    {
                        STContactDetailsPhoneCellViewModel *phoneViewModel = (STContactDetailsPhoneCellViewModel *)viewModel;
                        if([phoneViewModel isChanged])
                            return @(YES);
                    }
                }
                return @(NO);
            }];
}

＆＃13;

Answer 2

在HTML中使用colspan将两列width放入一列

Answer 3

以下是您需要应用于所有3列的CSS

.tableStyle {
border-collapse: collapse;
border: 1px solid #000000;
table-layout:auto;
}

它将为您自动调整大小。这需要花费更长的时间才能加载，但它会起作用！希望这有帮助！

如何在我的HTML表格上正确设置列宽？

3 个答案: