[英]Group multiple consecutive row cells into one with CSS?
Ok, here's a graphic to explain what I'm talking about: 好的,这是一张图形来解释我在说什么:
The first table would be what my html currently produces and the second table is what I'd like it to produce. 第一个表是我的html当前生成的内容,第二个表是我希望它生成的内容。
#animalTable{ display: table; } .animalRow{ display: table-row; } .animalCell{ display: table-cell; width: 33%; }
<div id="animalTable"> <div class="animalRow"> <div class="animalCell">Dog</div> <div class="animalCell">Milton</div> <div class="animalCell">1/2/1998</div> </div> ... </div>
What would be the best/easiest way to get my desired table? 拿到我想要的桌子的最好/最简单的方法是什么? I know I could brute force it by creating sub-tables inside the main table but I was wondering if there was a better way?
我知道可以通过在主表内创建子表来强行使用它,但我想知道是否有更好的方法?
Also, sorry if this is a dumb question. 另外,如果这是一个愚蠢的问题,对不起。
I suggest using tables
instead of div
for this specific case. 对于这种特定情况,我建议使用
tables
而不是div
。 Here is why you should Use tables for what they are meant to and div's for what they are meant to . 这就是为什么您应该将表用于其含义,将div用于其含义 。
What you are looking for is called Colspan and Rowspan , both are HTML td
and th
attributes. 您要查找的是Colspan和Rowspan ,它们都是HTML
td
和th
属性。
Example: 例:
<table>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
You can read further on w3schools . 您可以在w3schools上进一步阅读。
Hope this helps. 希望这可以帮助。
Simple, add different class or id selectors and in the css, remove all borders and re-add the ones you want to keep. 很简单,添加不同的类或id选择器,然后在CSS中删除所有边框,然后重新添加要保留的边框。 Example,
例,
div{
border: none;
border-top: solid 1px black;
border-left: solid 1px black;
}
Correct me if I am misunderstanding. 如果我误会了,请纠正我。 Otherwise, if you have any questions don't hesitate to ask!
否则,如果您有任何疑问,请随时提出!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.