Html 制作 td 填充表格宽度

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/14862838/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 05:36:59  来源:igfitidea点击:

Making a td fill table width

htmlcsshtml-table

提问by Twinone

I have a table that has a fixed height of 50px and 100% width.

我有一个固定高度为 50px 和 100% 宽度的表格。

Inside that table I have two divs, on the same line, like this:

在那个表里面我有两个 div,在同一行,像这样:

<table>
  <tr>
    <td>
      <div id="1"></div>
    </td>
    <td>
      <div id="2"></div>
    </td>
  </tr>
</table>

The first div has float:left, and the second has float:right.

第一个 div 有float:left,第二个有float:right

So the table is 100% of the page. I want div2 to wrap it's contents, and div1 to fill the remaining space so that div2 is aligned to the right like this:

所以表格是页面的 100%。我希望 div2 来包装它的内容,而 div1 来填充剩余的空间,以便 div2 像这样向右对齐:

+--------------------------------------------------------------+
| [ DIV 1          (Expands)       ][ DIV 2 AND ITS CONTENTS ] |
+--------------------------------------------------------------+

and what I currently get when div1 has less contents than a full line:

以及当 div1 的内容少于整行时我目前得到的结果:

+--------------------------------------------------------------+
| [ DIV 1 ][ DIV 2 ]                                           |
+--------------------------------------------------------------+

Without a table I can get it to work floating left and right directly, but then when they "get together", they will wrap under each other instead of next to each other.

如果没有桌子,我可以让它直接左右浮动,但是当它们“聚在一起”时,它们会相互包裹而不是彼此相邻。

EDIT: I've added a new jsfiddle here. This is the working example. Try removing all but one links from the left div, and see the result. The second div should stay at the most-right. I hope I explained myself.

编辑:我在这里添加了一个新的 jsfiddle 。这是工作示例。尝试从左侧 div 中删除除一个链接之外的所有链接,然后查看结果。第二个 div 应该留在最右边。我希望我解释了自己。

回答by tymeJV

Use the "colspan" property of td. Ex:

使用 td 的“colspan”属性。前任:

    <td colspan=75%> info </td>

回答by Twinone

Solved adding the width:100%to the table.

解决了将width:100%加到表中的问题。

http://jsfiddle.net/HRT5E/1/

http://jsfiddle.net/HRT5E/1/

table {
    width:100%;
}

回答by Vitaly Schekin

Just add width: 100%to first tdand browser will fill it's width automatically.

只需添加width: 100%到第一个td,浏览器将自动填充它的宽度。

回答by JohnFx

First, your table doesn't appear to be set to the full width of the page at all. You want to add a width style or width attribute to the markup.

首先,您的表格似乎根本没有设置为页面的全宽。您想向标记添加宽度样式或宽度属性。

Next just set a fixed width on the right "div" (or more accurately <TD>) and the first one will fill the remaining space.

接下来只需在右侧的“div”(或更准确地说<TD>)上设置一个固定宽度,第一个将填充剩余空间。

As others have pointed out, the wrapper table seems unnecessary though.

正如其他人指出的那样,包装表似乎没有必要。