0
CSSを使用してカレンダーを作成していて、セル内にテキストの量が変化してもレイアウトを修正できないようです。理想的には、私はカレンダーの統一された外観を乱しているのではなく、セルのサイズを超えてテキストをカットするだけです。同時に、私はCSSが定義されているので、テーブルをフルスクリーンにし、トップヘッダーを修正する必要があります。私はこれがテーブルレイアウトを使ってセルの幅に対してうまくいくようにしました。それは高さのために働くように見えることはできません。私はwhite-space: nowrap;とoverflow: hidden;を使ってみましたが、それは起こりそうにないようです。CSSで表のセルが垂直方向に展開されないようにする
すべての情報は非常に便利です。
.calendar_main{
\t table-layout: fixed;
\t position: absolute;
\t height:100%;
\t width:100%;
\t top: 0;
\t bottom: 0;
\t left: 0;
\t right: 0;
\t font-size:20px;
\t border-collapse: collapse;
\t background-color: #FFFFFF;
}
.calendar_main tr:nth-child(even) td:nth-child(odd),
.calendar_main tr:nth-child(odd) td:nth-child(even)
{
\t background-color: #f6f9eb;
}
.calendar_main td{
\t border: 2px solid black;
\t vertical-align: top;
}
.calendar_main th{
\t border: 2px solid black;
\t background-color: #A7C942;
\t color: #ffffff;
\t height:25px;
}
.icon{
\t width:64px;
\t height:64px;
\t vertical-align: middle;
}
#cal_title{
\t text-align: center;
\t background-color: #FFFFFF;
\t height:64px;
\t font-size:30px;
}
#cal_previous{
\t background-color: #FFFFFF;
\t height:64px;
}
#cal_next{
\t text-align: right;
\t background-color: #FFFFFF;
\t height:64px;
}<html>
\t <head>
\t \t <title>Calendar</title>
\t \t <link rel='stylesheet' type='text/css' href='style_1.css'>
\t \t <meta charset='utf-8' />
\t </head>
\t <body>
\t \t <center>
\t \t <table class="calendar_main">
\t \t \t <tr>
\t \t \t \t <td colspan=2 id="cal_previous"><a href="index.php?section=calendar&month=3&year=2017"><img class="icon" src="icon_previous.png"></a></td>
\t \t \t \t <td colspan=3 id="cal_title">April - 2017</td>
\t \t \t \t <td colspan=2 id="cal_next"><a href="index.php?section=calendar&month=5&year=2017"><img class="icon" src="icon_next.png"></a></td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th><th>Sun</th>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td></td>
\t \t \t \t <td></td>
\t \t \t \t <td></td>
\t \t \t \t <td></td>
\t \t \t \t <td></td>
\t \t \t \t <td>1<br>Event1<br>Event2<br>Event3<br>Event4</td>
\t \t \t \t <td>2</td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td>3</td>
\t \t \t \t <td>4</td>
\t \t \t \t <td>5<br>Event1</td>
\t \t \t \t <td>6<br>Event2</td>
\t \t \t \t <td>7</td>
\t \t \t \t <td>8</td>
\t \t \t \t <td>9</td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td>10<br>Event1</td>
\t \t \t \t <td>11</td>
\t \t \t \t <td>12<br>Event1</td>
\t \t \t \t <td>13<br>Event1</td>
\t \t \t \t <td>14</td>
\t \t \t \t <td>15</td>
\t \t \t \t <td>16</td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td>17</td>
\t \t \t \t <td>18</td>
\t \t \t \t <td>19</td>
\t \t \t \t <td>20</td>
\t \t \t \t <td>21<br>Event1<br>Event2</td>
\t \t \t \t <td>22</td>
\t \t \t \t <td>23</td>
\t \t \t </tr>
\t \t \t <tr>
\t \t \t \t <td>24<br>Event1</td>
\t \t \t \t <td>25</td>
\t \t \t \t <td>26</td>
\t \t \t \t <td>27</td>
\t \t \t \t <td>28</td>
\t \t \t \t <td>29</td>
\t \t \t \t <td>30</td>
\t \t \t </tr>
\t \t </table>
\t </body>
</html>
\t
私は複数行をサポートするために、セル内のテキストを必要としています。
を取り除いた後でこれを行う別の方法はありますか？多分、あらかじめ形成され、改行を使用していますか？またはこれはちょうど同じ問題を引き起こすでしょうか？セルの固定高さに関しては、javascriptを使って各セルの高さをそれぞれの特定のpx値を使って直接調整する必要があるのでしょうか？ –
tdの高さの設定は役に立ちません。私が高さを設定すると言ったことは、この場合ではなく、オーバーフローを使うというルールでした。 –