不可重複的表格單元格

我在每個單元格中都有文字的表格。我想在其中的一些下面添加一個新文本（就像我對該段落做的那樣），但是不移動「文本」，也不用調整單元格的大小。我怎樣才能做到這一點？不可重複的表格單元格

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; 
}

來源

2015-09-29 Ann

參見：http://jsfiddle.net/mh7qfr63/1/

添加垂直對齊，以確保所有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 
}

來源

2015-09-29 17:41:11

謝謝你，它的工作！ – Ann

不可重複的表格單元格

回答

相關問題