我有一个表格，每个单元格中都有文本。我想在其中一些下面添加一个新文本(就像我对该段落所做的那样)但不移动“文本”，也不调整单元格的大小。我该怎么做？
HTML代码:
<!doctype html>
<html>
<head>
<title>Table</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table width="80%" align="center">
<tr>
<th></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
<th>Saturday</th>
<th>Sunday</th>
</tr>
<tr>
<th>09:00</th>
<td>Text</td>
<td>Text</td>
<td></td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<th>10:00</th>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text/td>
</tr>
<tr>
<th>18:00</th>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text
<p>REZERV</p></td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<th>19:00</th>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text
<p>REZERV</p></td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<th>20:00</th>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
<td>Text</td>
</tr>
</table>
CSS 代码:
body
{
font-family: arial;
background-image: url("back.jpg");
background-repeat: no-repeat;
}
table{
table-layout: fixed;
}
th:first-child { /* CHANGE THE SIZE OF THE FIRST TH AND THE TD BELOW IT WILL FOLLOW... */
width: 7%;
font-weight: normal;
}
td
{
margin: 0;
text-align: center;
border-collapse: collapse;
outline: 3px solid #e3e3e3;
padding: 5px 10px;
font-size: 20px;
width: 30%;
}
tr:nth-child(even){
background: rgba(200, 196, 196,0.9);
color: white;
}
tr:nth-child(odd){
background: rgba(255, 255, 255,0.9);
color: grey;
}
td:after{
content:'';
display:block;
margin-top:50%;
}
th
{
background: #666;
color: white;
padding: 5px 10px;
width: 20%;
}
td:hover
{
cursor: pointer;
background: lightblue;
color: #666;
}
table tr:first-of-type {
font-size:30px;
font-style: italic;
}
p{
background-color: purple;
color: white;
}
最佳答案
参见:http://jsfiddle.net/mh7qfr63/1/
添加 vertical-align 以确保所有 tds 内容对齐到顶部。
vertical-align: top;
然后如果你想要一个特定的顶部填充然后添加:
padding-top: 40px // or some other value
如果您不希望 td 调整高度，则需要在 td 内明确设置高度。由于您的宽度是基于百分比的，因此宽度将根据您的页面宽度而变化。
综合:
td
{
margin: 0;
text-align: center;
border-collapse: collapse;
outline: 3px solid #e3e3e3;
padding: 5px 10px;
font-size: 20px;
width: 30%;
vertical-align: top;
padding-top: 40px; // or other number
height: 100px; // or other number
}
关于html - 不可调整的表格单元格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32849375/