0
CSS를 사용하여 캘린더를 만들고 있는데 셀에 다양한 양의 텍스트가있을 때 레이아웃을 수정하는 표가 보이지 않습니다. 이상적으로는 텍스트가 일정한 모양으로 엉망이되어 확장하는 것이 아니라 셀의 크기를 초과하면 텍스트가 잘리는 것을 원합니다. 동시에 전체 화면으로 표가 필요하고 CSS에서 정의 된대로 상단 머리글을 수정해야합니다. 나는 테이블 레이아웃을 사용하는 셀의 너비에 대해이 문제가 발생하도록했습니다 : fixed; 그러나 높이를 위해 일하게하는 것처럼 보일 수 없다. 나는 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
나는 여러 줄을 지원하기 위해 세포의 텍스트가 필요합니다.
을 제거한 후에이 작업을 수행 할 수있는 또 다른 방법이 있습니까? 어쩌면 미리 형식화되고 줄 바꿈을 사용하고 있을까요? 아니면 이것은 같은 문제를 일으킬 것입니까? 세포에 대한 고정 높이에 관해서는, 각각의 특정 px 값을 사용하여 각 셀의 높이를 직접 조절해야한다는 것을 의미할까요? –
td의 높이를 설정해도 도움이되지 않습니다. 높이 설정에 대해 말한 것은 '오버플로'를 사용하는 규칙이었습니다.이 경우가 아닙니다. –