Questions tagged «css-tables»

对于使用CSS样式化HTML <table>元素的问题，或者关于使用CSS display：table属性声明定义元素的布局以模仿HTML <table>的布局的问题，请使用此标记而不是仅使用[css]。

4
什么可以代替cellpadding，cellspacing，valign和HTML5表中的align？
在Visual Studio中，我看到以下警告： 验证（HTML 5）：属性“ cellpadding”不是元素“ table”的有效属性。 验证（HTML 5）：属性“ cellspacing”不是元素“ table”的有效属性。 验证（HTML 5）：属性“ valign”不是元素“ td”的有效属性。 验证（HTML 5）：属性“ align”不是元素“ td”的有效属性。 如果它们不是HTML5中的有效属性，那么用CSS替换它们是什么？
10
如何使CSS浮动在一行中？
我想在同一行上使用两个项目float: left作为左侧的项目。 我没有任何问题可以单独实现。问题是，即使您将浏览器的尺寸调整得非常小，我也希望这两项保持同一行。您知道...就像桌子一样。 我们的目标是无论包裹在右边，都不会包裹物品。 如何使用CSS告诉浏览器，我宁愿拉伸包含内容而div不是包装内容，因此float: right;div在float: left; div？之下？ 我想要的是： \ +---------------+ +------------------------/ | float: left; | | float: right; \ | | | / | | |content stretching \ Screen Edge | | |the div off the screen / &lt;--- +---------------+ +------------------------\ /
10
表格中特定行的边框？
我正在尝试设计一些HTML / CSS，可以在表格中的特定行周围放置边框。是的，我知道我真的不应该使用表格进行布局，但是我还不了解足够的CSS来完全替代它。 无论如何，我有一个包含多个行和列的表，其中一些与rowpan和colspan合并，我想在表的各个部分周围放置一个简单的边框。当前，我正在使用4个单独的CSS类（顶部，底部，左侧，右侧），分别附加到&lt;td&gt;表格顶部，底部，左侧和右侧的单元格。 .top { border-top: thin solid; border-color: black; } .bottom { border-bottom: thin solid; border-color: black; } .left { border-left: thin solid; border-color: black; } .right { border-right: thin solid; border-color: black; } &lt;html&gt; &lt;body&gt; &lt;table cellspacing="0"&gt; &lt;tr&gt; &lt;td&gt;no border&lt;/td&gt; &lt;td&gt;no border here either&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td …
120 html  css  border  css-tables 
5
div之间的空间-显示表格单元格
我这里有两个div： &lt;div style="display:table-cell" id="div1"&gt; content &lt;/div&gt; &lt;div style="display:table-cell" id="div2"&gt; content &lt;/div&gt; 有没有办法在这两个div之间分隔空间display:table-cell？
96 html  css  css-tables 
10
水平对齐表格的CSS方法
我想在浏览器窗口的中心显示一个固定宽度的表。现在我用 &lt;table width="200" align="center"&gt; 但是Visual Studio 2008在此行发出警告： 属性“ align”被认为已过时。建议使用较新的构造。 我应该将哪种CSS样式应用于表格以获得相同的布局？
16
CSS单元边距
在我的HTML文档中，我有一个包含两列和多行的表。如何使用CSS增加第一列和第二列之间的空间？我尝试应用“ margin-right：10px;” 到左侧的每个单元格，但没有效果。
96 html  css  cell  margin  css-tables 
7
在浏览器窗口（或电子邮件客户端预览窗格）中将HTML电子邮件内容居中的最佳方法是什么？
我通常将CSS规则margin:0 auto与960容器一起用于基于标准浏览器的内容，但是我是HTML电子邮件创建的新手，因此我想将以下设计放在没有标准CSS的浏览器窗口中。 http://static.helpcurenow.org/mockups/emails/2010/may-survey/survey.html 我似乎还记得在某个地方，也可以通过将您的电子邮件表设计包装到外部表集中width:100%并text-align:center在主体上使用某种内联样式或类似的方式来完成它，来完成此操作？ 是否有最佳做法？
2
CSS“显示：表列”应该如何工作？
鉴于以下HTML和CSS，我在浏览器中看不到任何东西（撰写本文时最新的Chrome和IE）。一切都崩溃为0x0像素。为什么？ &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; section { display: table; height: 100%; background-color: grey; } #colLeft { display: table-column; height: 100%; background-color: green; } #colRight { display: table-column; height: 100%; background-color: red; } #row1 { display: table-row; height: 100%; } #row2 { display: table-row; height: 100%; } #row3 { …
7
如何限制表格的列宽？
我表格中的一列可以包含一个没有空格的长文本。如何将其宽度限制为150px？我不希望它始终为150px（如果为空，则应该很窄），但是如果有长文本，我希望将其限制为150px，并包装文本。 这是一个测试示例：http : //jsfiddle.net/Kh378/（让我们限制第三列）。 先感谢您。 更新： 设置以下样式： word-wrap: break-word; max-width: 150px; 不能在IE8（在不同的计算机上经过测试）中工作，并且我想它在任何版本的IE中都不能工作。
3
CSS显示：表不显示边框
&lt;html&gt; &lt;style type="text/css"&gt; .table { display: table;} .tablerow { display: table-row; border:1px solid black;} .tablecell { display: table-cell; } &lt;/style&gt; &lt;div class="table"&gt; &lt;div class="tablerow"&gt; &lt;div class="tablecell"&gt;Hello&lt;/div&gt; &lt;div class="tablecell"&gt;world&lt;/div&gt; &lt;/div&gt; &lt;div class="tablerow"&gt; &lt;div class="tablecell"&gt;foo&lt;/div&gt; &lt;div class="tablecell"&gt;bar&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/html&gt; 根据我的理解，应该在通过tablerow类指定的每一行上绘制黑色边框。但是该边框不会出现。 我想更改行的高度。如果我用'px'指定它-它可以工作。但是，如果我给它加上％-就行不通。 .tablerow { display: table-row; border:1px solid black; position: relative; //not …
7
高度：<div>中<div>内的<div>为100％，显示：table-cell
这是使用display: table和display: table-cellCSS声明的2列标记： .table { display: table; } .cell { border: 2px solid black; vertical-align: top; display: table-cell; } .container { height: 100%; border: 2px solid green; } &lt;div class="table"&gt; &lt;div class="cell"&gt; &lt;p&gt;Text &lt;p&gt;Text &lt;p&gt;Text &lt;p&gt;Text &lt;p&gt;Text &lt;p&gt;Text &lt;p&gt;Text &lt;p&gt;Text &lt;/div&gt; &lt;div class="cell"&gt; &lt;div class="container"&gt;Text&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; 运行代码段Hide results展开摘要 但是.container块不会垂直填充父单元格。这是JsFiddle上的示例：http …
69 html  css  css-tables 
7
为什么width：100％在div {display：table-cell}上不起作用？
我正在尝试将某些内容垂直和水平居中放置在图像幻灯片（flexslider）上。这个问题也有类似的问题，但是我找不到直接适用于我的特定问题的令人满意的解决方案。由于FlexSlider的限制，我无法position: absolute;在实现中在img标签上使用。 我几乎在工作下面有解决方法。唯一的问题是我无法inner-wrapper通过display: table-cell属性将该宽度和高度声明用于div 。 这是标准行为，还是我的代码中缺少某些内容？如果这是标准行为，那么对我的问题最好的解决方案是什么？ 的HTML &lt;ul&gt; &lt;li&gt; &lt;img src="#"&gt; &lt;div class="outer-wrapper"&gt; &lt;div class="inner-wrapper"&gt; &lt;h1&gt;My Title&lt;/h1&gt; &lt;h5&gt;Subtitle&lt;/h5&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul&gt; 的CSS html, body { margin: 0; padding: 0; width: 100%; height: 100%; } ul { background: #CCC; height: 100%; width: 100%; list-style-position: outside; margin: 0; padding: 0; } …
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.