Questions tagged «html-table»

与HTML有关,表用于以表格形式显示数据。有关HTML表的问题应通过显示源代码有问题的方式来提出,或者,如果该问题是有关根据期望创建表的尝试失败,则询问者需要显示失败的尝试,描述期望并行为如何不同。


30
在jQuery中添加表格行
jQuery在表中添加最后一行作为最后一行的最佳方法是什么? 这可以接受吗? $('#myTable').append('<tr><td>my data</td><td>more data</td></tr>'); 您可以向这样的表添加什么内容(例如输入,选择,行数)是否有限制?

30
使div填充剩余屏幕空间的高度
我正在一个Web应用程序上工作,我希望其中的内容能填满整个屏幕的高度。 该页面具有标题,其中包含徽标和帐户信息。这可以是任意高度。我希望内容div将页面的其余部分填充到底部。 我有一个标题div和一个内容div。目前,我正在使用表格进行布局,如下所示: CSS和HTML #page { height: 100%; width: 100% } #tdcontent { height: 100%; } #content { overflow: auto; /* or overflow: hidden; */ } <table id="page"> <tr> <td id="tdheader"> <div id="header">...</div> </td> </tr> <tr> <td id="tdcontent"> <div id="content">...</div> </td> </tr> </table> 运行代码段隐藏结果展开摘要 页面的整个高度已填满,不需要滚动。 对于content div中的任何内容,设置top: 0;将其放在标题的正下方。有时,内容将是一个实际表,其高度设置为100%。把header里面content不会让这种工作。 有没有一种方法可以在不使用的情况下达到相同的效果table? 更新: …
1906 html  css  html-table 


21
HTML表中的自动换行
我一直在用s和s word-wrap: break-word包装文字。但是,它似乎在表单元格中不起作用。我将表设置为,其中包含一行和两列。列中的文本尽管具有上述样式,但不会自动换行。它导致文本超出单元格的边界。在Firefox,Google Chrome和Internet Explorer上会发生这种情况。divspanwidth:100%word-wrap 来源如下所示: td { border: 1px solid; } <table style="width: 100%;"> <tr> <td> <div style="word-wrap: break-word;"> Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word </div> </td> <td><span style="display: inline;">Short word</span></td> </tr> </table> 运行代码段隐藏结果展开摘要 上面的长字比我页面的边界大,但与上面的HTML相同。我尝试了以下添加text-wrap:suppress和的建议text-wrap:normal,但均无济于事。
566 html  css  html-table 

19
如何为<td>设置固定宽度?
简单方案: &lt;tr class="something"&gt; &lt;td&gt;A&lt;/td&gt; &lt;td&gt;B&lt;/td&gt; &lt;td&gt;C&lt;/td&gt; &lt;td&gt;D&lt;/td&gt; &lt;/tr&gt; 我需要为设置一个固定宽度&lt;td&gt;。我试过了: tr.something { td { width: 90px; } } 也 td.something { width: 90px; } 对于 &lt;td class="something"&gt;B&lt;/td&gt; 乃至 &lt;td style="width: 90px;"&gt;B&lt;/td&gt; 但是的宽度&lt;td&gt;仍然相同。

9
使用CSS的替代表格行颜色?
我正在使用具有备用行颜色的表。 tr.d0 td { background-color: #CC9999; color: black; } tr.d1 td { background-color: #9999CC; color: black; } &lt;table&gt; &lt;tr class="d0"&gt; &lt;td&gt;One&lt;/td&gt; &lt;td&gt;one&lt;/td&gt; &lt;/tr&gt; &lt;tr class="d1"&gt; &lt;td&gt;Two&lt;/td&gt; &lt;td&gt;two&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; 运行代码段隐藏结果展开摘要 在这里,我使用class tr,但是我只想使用table。当我将类用于表时,这适用于tr替代方法。 我可以使用CSS编写这样的HTML吗? &lt;table class="alternate_color"&gt; &lt;tr&gt;&lt;td&gt;One&lt;/td&gt;&lt;td&gt;one&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;Two&lt;/td&gt;&lt;td&gt;two&lt;/td&gt;&lt;/tr&gt; &lt;/table&gt; 如何使用CSS使行具有“斑马条纹”?
462 html  css  html-table 

22
如何使两个并排的div保持相同的高度?
我有两个div并排。我希望它们的高度相同,如果其中之一调整大小,则保持不变。我无法弄清楚这一点。有想法吗? 为了澄清我一个令人困惑的问题,我希望两个框的尺寸始终相同,因此如果一个框由于文本放置而增大,则另一个框应与高度匹配。 &lt;div style="overflow: hidden"&gt; &lt;div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px"&gt; Some content!&lt;br/&gt; Some content!&lt;br/&gt; Some content!&lt;br/&gt; Some content!&lt;br/&gt; Some content!&lt;br/&gt; &lt;/div&gt; &lt;div style="border:1px solid #cccccc; float:left; padding-bottom:1000px; margin-bottom:-1000px"&gt; Some content! &lt;/div&gt; &lt;/div&gt; 运行代码段隐藏结果展开摘要
440 html  css  html-table  flexbox 


16
将border-bottom添加到表行<tr>
我有一个3 x 3的表格。我需要一种为每行底部添加边框tr并为其指定特定颜色的方法。 首先,我尝试了直接方式,即: &lt;tr style="border-bottom:1pt solid black;"&gt; 但这没有用。所以我像这样添加了CSS: tr { border-bottom: 1pt solid black; } 那仍然没有用。 我更喜欢使用CSS,因为这样我就不必style在每一行中添加一个属性。我尚未向中添加border属性&lt;table&gt;。我希望那不会影响我的CSS。
385 html  css  html-table 

12
Colspan所有列
我如何指定td标记应跨所有列(当表中确切的列数是可变的/难以确定何时呈现HTML时)?w3schools提到您可以使用colspan="0",但并未确切说明哪些浏览器支持该值(IE 6在我们的支持列表中)。 似乎设置colspan为大于您可能具有的理论列数的值将是可行的,但如果将其table-layout设置为,则它将不起作用fixed。使用大量的自动版式是否有任何弊端colspan?有更正确的方法吗?

23
CSS3的border-radius属性和border-collapse:collapse不能混合使用。如何使用边框半径创建带有圆角的折叠表格?
编辑-原标题:是否有其他方式来实现border-collapse:collapse的CSS(为了有倒塌,圆角表)? 事实证明,仅使表格的边框折叠起来并不能解决根本问题,因此我更新了标题以更好地反映讨论内容。 我正在尝试使用该CSS3 border-radius属性制作带有圆角的表。我正在使用的表格样式如下所示: table { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px } 这是问题所在。我也想设置该border-collapse:collapse属性,并且在设置该属性时border-radius不再起作用。有没有一种基于CSS的方式可以获得与border-collapse:collapse不实际使用相同的效果? 编辑: 我在此处做了一个简单的页面来演示问题(仅Firefox / Safari)。 看来问题的很大一部分是将表设置为具有圆角不会影响Corner td元素的角。如果桌子全是一种颜色,那将不是问题,因为我可以td分别使第一行和最后一行的上角和下角变圆。但是,我在表中使用了不同的背景色来区分标题和条纹,因此内部td元素也将显示其圆角。 拟议解决方案摘要: 用另一个带有圆角的元素包围桌子是行不通的,因为桌子的四角“渗出了”。 将边框宽度指定为0不会折叠表格。 底部td四角设置CELLSPACING零后仍然广场。 相反,使用JavaScript可以避免此问题。 可能的解决方案: 这些表是用PHP生成的,因此我可以将一个不同的类应用于每个外部th / tds并分别设置每个角的样式。我不想这样做,因为它不是很优雅,并且要应用于多张桌子有点痛苦,所以请继续提出建议。 可能的解决方案2是使用JavaScript(特别是jQuery)对角进行样式设置。此解决方案也可以使用,但仍然不是我想要的(我知道我很挑剔)。我有两个保留意见: 这是一个非常轻量级的网站,我希望将JavaScript保持在最低水平 使用边界半径对我来说具有吸引力的一部分是优美的退化和渐进的增强。通过对所有圆角使用border-radius,我希望在支持CSS3的浏览器中拥有一个一致的圆形站点,并在其他浏览器中拥有一个一致的正方形站点(我在看着您,IE)。 我知道今天尝试使用CSS3似乎没有必要,但是我有自己的理由。我还要指出的是,此问题是w3c规范的结果,而不是CSS3的支持不佳,因此,当CSS3得到更广泛的支持时,任何解决方案都仍然是相关且有用的。



6
使单元格宽度适合内容
给定以下标记,我该如何使用CSS强制一个单元格(列中的所有单元格)适应其中内容的宽度,而不是拉伸(这是默认行为)? &lt;style type="text/css"&gt; td.block { border: 1px solid black; } &lt;/style&gt; &lt;table style="width: 100%;"&gt; &lt;tr&gt; &lt;td class="block"&gt;this should stretch&lt;/td&gt; &lt;td class="block"&gt;this should stretch&lt;/td&gt; &lt;td class="block"&gt;this should be the content width&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; 编辑:我知道我可以对宽度进行硬编码,但是我不愿意这样做,因为该列中的内容是动态的。 看下面的图像,第一张图像是标记生成的图像。第二张图片是我想要的。
265 html  css  html-table 

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.