Question

我知道这应该很容易，我发现很多线程都涉及到这个，但我必须遗漏一些东西。在尝试了一些事情之后，这是我当前的代码CSV Data Set Config in Sharing Mode - Made Easy，根据消息来源应该可以做到这一点。但是细胞的大小不一样。

#calendar {
  table-layout: fixed;
}

<table border=1 id='calendar'>
  <tr>
    <td class='calendar_head'>hi</td>
    <td colspan=5 class='calendar_head_month' id='calendar_month'>
      ---</td>
    <td class='calendar_head'>hello</td>
  </tr>
  <tr>
    <td class='calendar_day'>Mo</td>
    <td class='calendar_day'>Di</td>
    <td class='calendar_day'>Mi</td>
    <td class='calendar_day'>Do</td>
    <td class='calendar_day'>Fr</td>
    <td class='calendar_day'>Sa</td>
    <td class='calendar_day'>So</td>
  </tr>
  <tr>
    <td class='calendar_entry' id='calendar_entry_1'></td>
    <td class='calendar_entry' id='calendar_entry_2'></td>
    <td class='calendar_entry' id='calendar_entry_3'></td>
    <td class='calendar_entry' id='calendar_entry_4'></td>
    <td class='calendar_entry' id='calendar_entry_5'></td>
    <td class='calendar_entry' id='calendar_entry_6'></td>
    <td class='calendar_entry' id='calendar_entry_7'></td>
  </tr>
</table>

Answer 1

我不确定这是否能回答你的问题。但您可以使用CSS声明单元格的大小：

编辑：我没有使用正确的百分比。不要忘记p标签的高度为18px，因此您必须在计算中添加它。

＆＃13;

table { 
table-layout: fixed; 
width:100%
}
td {
  padding-bottom: 10%;
}

＆＃13;

<body>
    <table border=1 id='calendar'>
        <tr>
            <td class='calendar_head'>hi</td>
            <td class='calendar_head_month' id='calendar_month'>
            <td class='calendar_head_month' id='calendar_month'>
            <td class='calendar_head_month' id='calendar_month'>
            <td class='calendar_head_month' id='calendar_month'>
            <td class='calendar_head_month' id='calendar_month'>
               </td>
            <td class='calendar_head'>hello</td>
        </tr>
        <tr>
            <td class='calendar_day'>Mo</td>
            <td class='calendar_day'>Di</td>
            <td class='calendar_day'>Mi</td>
            <td class='calendar_day'>Do</td>
            <td class='calendar_day'>Fr</td>
            <td class='calendar_day'>Sa</td>
            <td class='calendar_day'>So</td>
        </tr>
        <tr>
            <td class='calendar_entry' id='calendar_entry_1'></td>
            <td class='calendar_entry' id='calendar_entry_2'></td>
            <td class='calendar_entry' id='calendar_entry_3'></td>
            <td class='calendar_entry' id='calendar_entry_4'></td>
            <td class='calendar_entry' id='calendar_entry_5'></td>
            <td class='calendar_entry' id='calendar_entry_6'></td>
            <td class='calendar_entry' id='calendar_entry_7'></td>
        </tr>
    </table>
</body>

＆＃13;

Answer 2

你没有声明一些事情，例如父母宽度

body {width: 100%; min-height: 100%; height: 100%;} /* this is this parent element of table*/
#calendar{table-layout: fixed;}
table {width: 50%; height: 150px;} /* this is this parent element the table row*/ 
tr {
  width: 100%;
  min-height: calc(100% / 3);
  line-height: calc(100% / 3);
 }  /* this is this parent element the table data */ 
td.calendar_day {
  width: calc(100% / 7);
}
td.calendar_entry {
   width: calc(100% / 7);
}
td.calendar_entry:empty:before {
 content: "\00a0"; /* unicode zero width space character */
 }

<body>
    <table border=1 id='calendar'>
        <tr>
            <td class='calendar_head'>hi</td>
            <td colspan=5 class='calendar_head_month' id='calendar_month'>
                ---</td>
            <td class='calendar_head'>hello</td>
        </tr>
        <tr>
            <td class='calendar_day'>Mo</td>
            <td class='calendar_day'>Di</td>
            <td class='calendar_day'>Mi</td>
            <td class='calendar_day'>Do</td>
            <td class='calendar_day'>Fr</td>
            <td class='calendar_day'>Sa</td>
            <td class='calendar_day'>So</td>
        </tr>
        <tr>
            <td class='calendar_entry' id='calendar_entry_1'></td>
            <td class='calendar_entry' id='calendar_entry_2'></td>
            <td class='calendar_entry' id='calendar_entry_3'></td>
            <td class='calendar_entry' id='calendar_entry_4'></td>
            <td class='calendar_entry' id='calendar_entry_5'></td>
            <td class='calendar_entry' id='calendar_entry_6'></td>
            <td class='calendar_entry' id='calendar_entry_7'></td>
        </tr>
    </table>
</body>

见这里：https://jsfiddle.net/e97ysbhz/6/

总而言之，如果你按百分比工作，请确保宣布父母

正如我在评论中解释的那样，大小是由它的内容决定的，所以我做了什么让它“出现”，因为有一些东西，因此我在CSS中应用了一个小技巧。

HTML表：相同的单元格大小

2 个答案: