对齐表行和列 [英] Aligning table rows and columns
问题描述
我有两个表
第一个表有2行4列。第一列的行跨距为2.
在图片中,最后3列与两行不对齐。这是如何解决的?
First table has 2 rows and 4 columns. The first column has a row span of 2. In the picture however the last 3 columns are not aligned with the two rows. How can this be fixed?
此外,这个表是按照列大小相等的。
In addition, this table has been made so that it is equal sizes by columns.
表2也有3列,但有几行。但是似乎前3列已经挤压在一起。任何人都可以看到的问题?我认为它可能在我的CSS。
Table 2 has also 3 columns but several rows. However it seems that the first 3 columns have squashed together. Can anyone see the problem? I think it might be in my CSS.
表格的HTML :
<table class="equalDevide" cellpadding="0" cellspacing="0" width="100%" border="0">
这是我的第一个表格的行第1列第2列
Here is my HTML for the first table row 1 column 2
<td>
<div id="positionAnchor">
<img src="adele.jpg" alt="Adele">
<div id="bottom">
<h4 class="topText">ALBUM</h4>
<h3 class ="topText">ADELE 21 COVER </br> ADELE</h3>
</div></div>
</td>
第2列第2列
<tr id="left-col">
<td>
<div id="caption-color">
<h3 id="active">Adele 21 Album</h3>
<p class="music-name"><span class ="glyphicon glyphicon-headphones"> Adele - Skyfall</span></p>
</div>
</td>
这是与它一起的CSS:
this is the CSS that goes along with it:
#bottom{
position: absolute;
display: inline-block;
bottom: 0px;
left:0px;
}
#positionAnchor {
position: relative;
width:1px;
}
#caption-color{
background-color: #212121;
position: relative;
display: inline-block;
bottom: 0px;
padding: 5px;
float: bottom;
}
.equalDevide td {
width:25%;
}
第二个表html: b
$ b
Second table html :
<table class="table">
<tbody>
<tr>
<td id="left-info">
<span class="glyphicon glyphicon-calendar"> 17 SEPTEMBER</span>
</td>
<td id="left-info">
<span class="glyphicon glyphicon-music" > MARTIN GARRIX</span>
</td>
<td id="left-info">
<span class="glyphicon glyphicon-map-marker"> NEW ORLEANS,LA</span>
</td>
<td id="buyNow">
Buy Now
</td>
</tr>
第二个表CSS :
table{
border-collapse: collapse;
}
tr{
background-color: #575757;
border-top: 10px solid #383D3D !important;
}
td{
border-left: 3px solid #383D3D !important;
text-align: center;
}
推荐答案
Match#caption-color CSS and positionAnchor CSS up ...
Match #caption-color CSS and positionAnchor CSS up ...
#positionAnchor {
position: relative;
display: inline-block;
text-align:center; /* and center text */
}
第二个表css规则不是你认为。
the 2nd table css rules are not what you think.
table{ ... rules for element table }
.table{ ... rules for class table }
这篇关于对齐表行和列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!