HTML / CSS - 将元素宽度扩展到可见区域（超出包含元素的宽度） [英] HTML/CSS - Extend element width to visible area (beyond width of containing element)

问题描述

我有一个我正在生成的网页，其中有一个绿色背景的h2标签表。该表可以有任意数量的列，我希望h2元素水平延伸至用户可以滚动的位置，以便表格上方总是有一个绿色条。我试图达到的效果是一个至少跨越表格宽度的绿色横条，以便它始终直接位于表格上方，无论用户滚动多远。

以下是它目前的样子（红色轮廓大致显示了包含html，body和div元素的边缘）：

以下是相关代码片段：

css：

  h2 {
 font-family：Arial; 
 font-size：20pt; 
颜色：#FFFFFF; 
 text-align：left; 
 font-weight：normal; 
背景颜色：＃00693C; 
明确：两者; 
 padding：2px; 
 margin：0px; 
} 
 table.response {
 border：1px outset; 
 border-collapse：分开; 
} 
 table.response td {
 font-size：14px; 
 padding：3px; 
 border：1px inset; 
 
  

html：

 < H2> [剪断] LT; / H2> 
< table class =response> 
< tbody> 
< tr> 
< td> [snip]< / td> 
 [...] 
< / tr> 
 [...] 
< / tbody> 
< / table> 
  

我已经试过的东西没有用过：

1. < thead>包含单个< tr>和一个单独的其中在第三方的colspan被设置为表格中的列数。这适用于较少数量的列，但对于较大的表格（例如，colspan =6000），某些浏览器（特别是Firefox 11）将单元格（及其背景）渲染为只占用一列。


2. A< thead>包含单个< tr>和第一个使用colspan =2和为< tr>设置的背景色CSS属性。元件。使用Firefox的Inspect Element功能，它显示< tr>横跨表格的整个宽度，但背景仅适用于一个单元格。


3. 包含单个< tr>和第一个其中colspan =2和另一个为表的每一个剩余的列。我尝试删除< thead>上的单元格之间的分隔，但我无法执行操作。我的问题是这样的：Is有一种方法可以达到使绿条至少延伸桌子整个宽度的效果，如果是这样，它是什么？我希望不使用JavaScript或者在生成表格的HTML时生成样式代码。

添加 float：left 或 display：inline-block 添加到包含表的元素和 h2 。

I have a web page that I'm generating, where there is a h2 with a green background labeling a table. The table can have any number of columns and I would like the h2 element to extend horizontally as far as the user can scroll, so that there is always a green bar above the table. The effect I'm trying to achieve is a green bar that spans at least the width of the table, so that it is always directly above the table, no matter how far the user scrolls.

Here is what it currently looks like (the red outline shows approximately the edges of the containing html, body, and div elements): And here are the relevant pieces of code:

css:

h2 {
    font-family:Arial;
    font-size:20pt;
    color:#FFFFFF;
    text-align:left;
    font-weight:normal;
    background-color:#00693C;
    clear: both;
    padding:2px;
    margin: 0px;
}
table.response {
    border:1px outset;
    border-collapse: separate;
}
table.response td {
    font-size: 14px;
    padding: 3px;
    border:1px inset;
}

html:

<h2>[snip]</h2>
<table class="response">
  <tbody>
    <tr>
      <td>[snip]</td>
      [...]
    </tr>
    [...]
  </tbody>
</table>

Things I have tried already that haven't worked:

1. A <thead> element containing a single <tr> and a single <th> where the colspan on the <th> is set to the number of columns in the table. This works for smaller numbers of columns, but for larger tables (for example, with colspan="6000"), some browsers (specifically, Firefox 11) render the cell (and its background) as only taking up one column.
2. A <thead> element containing a single <tr> and one <th> with colspan="2" and the background-color CSS property set for the <tr> element. Using Firefox's Inspect Element feature, it showed that the <tr> spanned the entire width of the table, but the background was only applied to the one cell.
3. A <thead> element containing a single <tr> and one <th> with colspan="2" and another <th> for every remaining column of the table. I tried to remove the separation between cells on the <thead>, but I was unable to.

My question is this: Is there a way to achieve the effect of having the green bar extend at least the entire width of the table, and if so, what is it? I would prefer not to use JavaScript or have to generate style code when I generate the HTML for the table.

解决方案

Add float: left or display: inline-block to the element that contains the table and h2.

这篇关于HTML / CSS - 将元素宽度扩展到可见区域（超出包含元素的宽度）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！