Question

我希望所有TD单元格具有相同的大小（正方形），但我不知道如何使左标题（空标题和带时间戳的标题）更小。我知道我使用了表格布局：固定，但我没有其他线索。有任何想法吗？

CSS：

body
{
    font-family: arial;
    background-image: url("back.jpg");
    background-repeat: no-repeat;
}
table{
    table-layout: fixed;
}
td
{
    margin: 0;
    text-align: center;
    border-collapse: collapse;
    outline: 3px solid #e3e3e3;
    padding: 5px 10px;
    font-size: 20px;
    width: 30%;
    background: rgba(250, 246, 246,.8);
}
td:after{
    content:'';
    display:block;
    margin-top:50%;
}
th
{
    background: #666;
    color: white;
    padding: 5px 10px;
    width: 20%;
}

td:hover
{
    cursor: pointer;
    background: rgba(228,255,255,0.5);
    back
        color: white;
}
table tr:first-of-type {
    font-size:30px;
    font-style: italic;
}

HTML：

<!doctype html>
<html>
<head>
    <title>Tabel</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<table width="100%" align="center">
    <tr>
        <th></th>
        <th>Luni</th>
        <th>Marti</th>
        <th>Miercuri</th>
        <th>Joi</th>
        <th>Vineri</th>
        <th>Sambata</th>
        <th>Duminica</th>
    </tr>
    <tr>
        <th>09:00</th>

        <td>Cornel</td>
        <td>Cornel</td>
        <td></td>
        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel</td>
    </tr>

    <tr>
        <th>10:00</th>

        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel1</td>
        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel</td>
    </tr>

    <tr>
        <th>18:00</th>

        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel</td>
    </tr>

    <tr>
        <th>19:00</th>

        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel</td>
    </tr>

    <tr>
        <th>20:00</th>

         <td>Cornel</td>
         <td>Cornel</td>
         <td>Cornel</td>
         <td>Cornel</td>
         <td>Cornel</td>
         <td>Cornel</td>
         <td>Cornel</td>
    </tr>
</table>

Answer 1

你几乎应该得到它......

我已经更新了你的HTML和你的CSS。见下文。

＆＃13;

body {
  font-family: arial;
  background-image: url("back.jpg");
  background-repeat: no-repeat;
}
table {
  table-layout: fixed;
}
td {
  margin: 0;
  text-align: center;
  border-collapse: collapse;
  outline: 3px solid #e3e3e3;
  padding: 5px 10px;
  font-size: 20px;
  width: 30%;
  background: rgba(250, 246, 246, .8);
}
td:after {
  content: '';
  display: block;
  margin-top: 50%;
}
th:first-child { /* CHANGE THE SIZE OF THE FIRST TH AND THE TD BELOW IT WILL FOLLOW... */
  width: 14%;
}
th {
  background: #666;
  color: white;
  padding: 5px 10px;
  width: 20%;
}
td:hover {
  cursor: pointer;
  background: rgba(228, 255, 255, 0.5);
  color: white;
}
table tr:first-of-type {
  font-size: 30px;
  font-style: italic;
}

＆＃13;

<table width="100%" align="center">
    <tr>
        <th></th>
        <th>Luni</th>
        <th>Marti</th>
        <th>Miercuri</th>
        <th>Joi</th>
        <th>Vineri</th>
        <th>Sambata</th>
        <th>Duminica</th>
    </tr>
    <tr>
        <th>09:00</th>

        <td>Cornel</td>
        <td>Cornel</td>
        <td></td>
        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel</td>
    </tr>

    <tr>
        <th>10:00</th>

        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel1</td>
        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel</td>
    </tr>

    <tr>
        <th>18:00</th>

        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel</td>
    </tr>

    <tr>
        <th>19:00</th>

        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel</td>
        <td>Cornel</td>
    </tr>

    <tr>
        <th>20:00</th>

         <td>Cornel</td>
         <td>Cornel</td>
         <td>Cornel</td>
         <td>Cornel</td>
         <td>Cornel</td>
         <td>Cornel</td>
         <td>Cornel</td>
    </tr>
</table>

＆＃13;

Answer 2

我的想法是将标题的内容放在另一个表中以使其正常工作：

  <tr>
    <th>
     <table>
      <tr>
       <td>18:00</td>
      </tr>
     </table>
    </th>

    <td>Cornel</td>
    <td>Cornel</td>
    <td>Cornel</td>
    <td>Cornel</td>
    <td>Cornel</td>
    <td>Cornel</td>
    <td>Cornel</td>
</tr>

然后你可以简单地改变标题内表格的大小。

CSS表头单元格和标准单元格

2 个答案: