个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
这个问题类似于this one ，但有一个额外的要求:我希望表格在其父项中具有 100% 的宽度。该问题的复制图像:
所以我希望“绿色部分”占据父级的 100% 宽度，并且单元格之间的间距为黄色。
我们可以在表格上使用负边距来“取消”红色间距，至少在大多数情况下是这样。
然而，这并不总是适用于流体布局。实际上，只要有足够的内容使表格占据 100% 的宽度(表格具有 width:auto)，它就可以正常工作。当没有足够的内容来执行此操作时，问题就会出现，因为显而易见的解决方案 width:100% 没有解决这个问题:表格将足够宽以适应包含边框间距的父项，但是我们正在剥离它，所以 table 不再足够宽了。
到目前为止，我找到的唯一“解决方案”是用长的、最好是不可见的内容强制填充表格，这样它就会填满“真实”的 100%。但我希望为此提供一个纯 css 解决方案……我也不希望使用计算/表达式来获得尽可能大的浏览器支持。
body {padding: 1em}
section {background-color: yellow}
table {background-color: pink}
td {background-color: lightgreen}
table {border-spacing: 1em}
table.working, table.failing {margin: -1em;}
table.failing {width: 100%}<body>
<section>
<h2>Simple table</h2>
<table>
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
</table>
<br>
<h2>Succesful "100% width" for both cells</h2>
<table class="working">
<tr>
<td>cell with a lot of content to make sure that the table will be wide enough</td>
<td>cell with a lot of content to make sure that the table will be wide enough</td>
</tr>
</table>
<br>
<h2>Unsuccesful 100% width</h2>
<table class="failing">
<tr>
<td>table with</td>
<td>100% width</td>
</tr>
</table>
<br>
</section>
</body>最佳答案
为此，您需要手动处理一些 css。
body {padding: 1em}
section {background-color: yellow;}
table {background-color: pink;}
td {background-color: lightgreen}
table {border-spacing:0;}
table.working,
/*table.failing {margin: -1em;}*/
table.failing {width: 100%; margin:0;}
table tr td{
border:5px solid #ff0000;
padding:10px;
}
.no-top{
border-top:none;
}
.no-bottom{
border-bottom:none;
}
.no-left{
border-left:none;
}
.no-right{
border-right:none;
}<body>
<section>
<h2>Simple table</h2>
<table cellpadding="0">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
</table>
<br>
<h2>Succesful "100% width" for both cells</h2>
<table class="working">
<tr>
<td>cell with a lot of content to make sure that the table will be wide enough</td>
<td>cell with a lot of content to make sure that the table will be wide enough</td>
</tr>
</table>
<br>
<h2>Unsuccesful 100% width</h2>
<table class="failing">
<tr>
<td class="no-top no-left">table with</td>
<td class="no-top no-right">100% width</td>
</tr>
<tr>
<td class="no-bottom no-left">table with</td>
<td class="no-bottom no-right">100% width</td>
</tr>
</table>
<br>
</section>
</body>关于html - 具有单元格间距但没有外部间距的全 Angular 表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38900202/
25
4
0
我已经尝试在我的 CSS 中添加一个元素来删除每三个 div 的 margin-right。不过，似乎只是出于某种原因影响了第 3 次和第 7 次。需要它在第 3、6、9 等日工作... CSS .s
如何使 div/input 闪烁或“脉冲”？例如，假设表单字段输入了无效值？ 最佳答案 使用 CSS3 类似 on this page ，您可以将脉冲效果添加到名为 error 的类中: @-webk
我目前正在尝试构建一个简单的 wireframe来自 lattice 的情节包，但由沿 y 轴的数百个点组成。这导致绘图被线框网格淹没，您看到的只是一个黑色块。我知道我可以用 col=FALSE 完全
在知道 parent>div CSS 选择器在 IE 中无法识别后，我重新编码我的 CSS 样式，例如: div#bodyMain div#paneLeft>div{/*styles here*/}
我有两个 div，一个在另一个里面。当我将鼠标悬停 到最外面的那个时，我想改变它的颜色，没问题。但是，当我将鼠标悬停 到内部时，我只想更改它的颜色。这可能吗？换句话说，当 将鼠标悬停到内部 div 上
我需要展示这样的东西 有人可以帮忙吗？我可以实现以下输出 我正在使用以下代码:: GridView.builder( scrollDirection: Axis.vertical,
当 Bottom Sheet 像 Android 键盘一样打开时，是否有任何方法可以手动上推布局( ScrollView 或回收器 View 或整个 Activity )？或者你可以说我想以 Bott
我有以下代码，用于使用纯 HTML 和 CSS 显示翻转。当您将鼠标悬停在文本上时，它会更改左右图像。 在我测试的所有浏览器中都运行良好，Safari 4 除外。据我收集的信息，Safari 4 支持
我构建了某种 CMS，但在使用 TinyMCE 和 Bootstrap 时遇到了一些问题。 我有一个页面，其中概述了一个 div，如果用户单击该 div，他们可以从模态中选择图像。该图像被插入到一个
出于某种原因，当我设置一个过渡时，当我的鼠标悬停在一个元素上时，背景会改变颜色，它只适用于一个元素，但它们都共享同一个类？任何帮助我的 CSS .outer_ad { position:rel
好吧，这真的很愚蠢。我不知道 Android Studio 中的调试监视框架发生了什么。我有 1.5.1 的工作室。 是否有一些来自 intellij 的 secret 知识来展示它。 最佳答案 与以
我有这个标记: some code > 我正在尝试获取此布局: 注意:上一个和下一个按钮靠近#player 我正在尝试这样: .nextBtn{
网站:http://avuedesigns.com/index 首页有 6 个菜单项。我希望每件元素在您经过时都有自己的颜色。 这是当您将鼠标悬停在 div 上时将所有内容更改为白色的行 li#hom
我需要在 index.php 文件中显示它，但没有任何效果。我所有的文章都没有正确定位。我将其用作代码: 最佳答案 您可以首先检查您
我是一名优秀的程序员,十分优秀！