对齐表格的行和列 [英] Aligning table rows and columns
问题描述
我有两个表
第一表具有2行4列。第一列2行跨度。 在画面然而最近3列不与两排对齐。这怎么能解决吗？
在此外，此表中已经取得了，使得它等于尺寸由列。
表2还具有3列，但几行。然而似乎前三列已压扁在一起。任何人都可以看到这个问题？我想可能是我的CSS。
的HTML表格：</ STRONG>
＆LT;表类=equalDevide的cellpadding =0CELLSPACING =0WIDTH =100％的边界=0＆GT;
下面是我的HTML为第一个表行1列2
＆LT; TD＆GT;
＆LT; DIV ID =positionAnchor＆GT;
＆LT; IMG SRC =adele.jpgALT =阿黛尔＆GT;
＆LT; DIV ID =底和GT;
＆LT; H4类=的TopText＆GT; ALBUM＆LT; / H4＆GT;
＆LT; H3类=的TopText＆GT; ADELE 21 COVER＆LT; / BR＆GT; ADELE＆LT; / H3＆GT;
＆LT; / DIV＆GT;＆LT; / DIV＆GT;
＆LT; / TD＆GT;
行2列2
＆LT; TR ID =左-COL＆GT;
＆LT; TD＆GT;
＆LT; DIV ID =字幕颜色＆GT;
＆LT; H3 ID =主动与GT;阿黛勒21集＆LT; / H3＆GT;
＆其中，P类=音乐名称＆GT;＆LT;跨度类=glyphicon glyphicon-耳机＆GT;阿黛尔 - 007：大破天幕杀机＆LT; / SPAN＆GT;＆LT; / P＆GT;
＆LT; / DIV＆GT;
＆LT; / TD＆GT;
这是伴随着它的CSS：
#bottom {
位置：绝对的;
显示：inline-block的;
底部：0px;
左：0px;
}
#positionAnchor {
位置：亲属;
宽度：1px的;
}
＃标题颜色{
背景颜色：＃212121;
位置：亲属;
显示：inline-block的;
底部：0px;
填充：5px的;
浮动：底部;
}
.equalDevide TD {
宽度：25％;
}
二表HTML：
＆LT;表类=表＆GT;
＆LT; TBODY＆GT;
＆其中; TR＆GT;
＆LT; TD ID =左信息＆GT;
＆LT;跨度类=glyphicon glyphicon日历＆GT; 9月17日＆LT; / SPAN＆GT;
＆LT; / TD＆GT;
＆LT; TD ID =左信息＆GT;
＆LT;跨度类=glyphicon glyphicon音乐＆GT;马汀·高瑞克斯＆LT; / SPAN＆GT;
＆LT; / TD＆GT;
＆LT; TD ID =左信息＆GT;
＆LT;跨度类=glyphicon glyphicon-地图标记＆GT;新奥尔良，洛杉矶＆LT; / SPAN＆GT;
＆LT; / TD＆GT;
＆LT; TD ID =百脑汇＆GT;
立即购买
＆LT; / TD＆GT;
＆LT; / TR＆GT;
二表CSS：
表{
边境崩溃：崩溃;
}
TR {
背景颜色：＃575757;
边境顶：10px的固体＃383D3D重要的;
}
TD {
左边框！的3px固体＃383D3D重要的;
文本对齐：中心;
}
匹配＃标题色CSS和positionAnchor CSS起来......
#positionAnchor {
位置：亲属;
显示：inline-block的;
文本对齐：中心; / *和中心文本* /
}
2表CSS规则你不觉得什么。
{表为元素表...规则}
。表{...规则类表}
I have two tables
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.
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 for the table:
<table class="equalDevide" cellpadding="0" cellspacing="0" width="100%" border="0">
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>
row 2 column 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>
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%;
}
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>
Second table 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 ...
#positionAnchor {
position: relative;
display: inline-block;
text-align:center; /* and center text */
}
the 2nd table css rules are not what you think.
table{ ... rules for element table }
.table{ ... rules for class table }
这篇关于对齐表格的行和列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
