我有这张桌子,我尝试包装绿色的span元素(a,b,c,d,e,f),以便所有列都具有相同的宽度,并将多余的span放在同一单元格的额外行中,以增加高度。就像现在一样,第一列的宽度取自跨度,并且全部都在一行中。我尝试更改显示和自动换行选项,但是什么也没做。
body {
background-color: #444;
}
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
font-size: 30px;
height: 40px;
text-align: center;
}
td {
width: 100px;
}
.goods td:nth-child(1){
color:green;
}
.goods span{
border: 1px solid green;
border-radius:15px;
padding-right: 5px;
width:13px;
cursor:pointer;
}
<table id="main">
<tr>
<td>K</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>*</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>*</td>
</tr>
<tr class="goods">
<td><span id="good1">a</span><span id="good2">b</span><span id="good3">c</span><span id="good4">d</span><span id="good5">e</span><span id="good6">f</span></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><span id="ship">+</span></td>
</tr>
</table>
最佳答案
默认情况下,span
是内联元素,因此您必须将display
属性更改为inline-block
。
body {
background-color: #444;
}
table {
border-collapse: collapse;
}
table,
th,
td {
border: 1px solid black;
font-size: 30px;
height: 40px;
text-align: center;
}
td {
width: 100px;
}
.goods td:nth-child(1){
color:green;
}
.goods span{
border: 1px solid green;
border-radius:15px;
padding-right: 5px;
width:13px;
cursor:pointer;
display: inline-block;
}
<table id="main">
<tr>
<td>K</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>*</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>*</td>
</tr>
<tr class="goods">
<td><span id="good1">a</span><span id="good2">b</span><span id="good3">c</span><span id="good4">d</span><span id="good5">e</span><span id="good6">f</span></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><span id="ship">+</span></td>
</tr>
</table>