固定表格布局（html/CSS）時，只有一列寬度發生變化
[英]only one column width changes with table-layout fixed (html/CSS)
問題描述
我正在用 css 和 html 編程。 我做了一個表格，但是當頁面寬度改變時，只有一列改變了它的寬度，而不是每一列。 出於樣式原因，我為不同的 td 元素使用了不同的標簽。 桌子。 相關代碼可能是帶有table-layout:fixed;的 css 部分table-layout:fixed; 線。
/* basic style*/ .c_container{ margin:0 auto; width: 80%; height: auto; } .c_week{ font-weight: bold; background-color: rgba(255,0,0,0.2); } .c_td:hover{ background-color: #add8e6; } .c_November{ text-align: center; background-color: #CDCDCD; } .c_weekdays{ color: black; background-color: #D0F0C0; } .c_calendar, .c_th, .c_td, .c_week{ width: 100%; table-layout: fixed; text-align: center; font-size: 20px; border:3px solid #000; border-collapse: collapse; cursor: pointer; } .c_td{ text-align: left; vertical-align: top; font-size: 10px; } /* markere helg */ .c_weekend{ background-color: #FED8E1; } /* markerer datoer som ikke er i november */ .c_graydays{ background-color: #D3D3D3; } /* markere spesielle hendelser*/ .c_expedition, .c_talent, .cr_talent{ background-color: #FFFCBB; } /* hover*/ .c_expedition .c_expeditiontext { visibility: hidden; color: white; background-color: black; text-align: center; position: absolute; z-index: 2; border-radius: 8px; padding: 10px; } .c_expedition:hover .c_expeditiontext { visibility: visible; } .c_talent .c_talenttext { visibility: hidden; color: white; background-color: black; text-align: center; position: absolute; z-index: 2; border-radius: 8px; padding: 10px; } .c_talent:hover .c_talenttext { visibility: visible; } .cr_talent .cr_talenttext { visibility: hidden; color: white; background-color: black; text-align: center; position: absolute; z-index: 2; border-radius: 8px; padding: 10px; } .cr_talent:hover .cr_talenttext { visibility: visible; }
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Calendar</title> <link rel="stylesheet" href="calendar.css"> <script type="text/javascript" src="calendar.js" async></script> </head> <body> <div class="c_container"> <div class="c_November" > <h2 id="c_title">November 2020</h2> </div> <table id="c_calendar" > <tr> <th class="c_weekdays c_th">Week</th> <th class="c_weekdays c_th">Mon</th> <th class="c_weekdays c_th">Tue</th> <th class="c_weekdays c_th">Wed</th> <th class="c_weekdays c_th">Thu</th> <th class="c_weekdays c_th">Fri</th> <th class="c_weekdays c_th">Sat</th> <th class="c_weekdays c_th">Sun</th> </tr> <tr> <td class="c_week " >44</td> <td class="c_graydays c_td" >26</td> <td class="c_graydays c_td" >27</td> <td class="c_graydays c_td" >28</td> <td class="c_graydays c_td" >29</td> <td class="c_graydays c_td" >30</td> <td class="c_graydays c_weekend c_td" >31</td> <td class="c_weekend c_td">1</td> </tr> <tr> <td class="c_week " >45</td> <td class="c_td">2</td> <td class="c_td">3</td> <td class="c_td">4</td> <td class="c_td">5</td> <td class="c_td">6</td> <td class="c_weekend c_td">7</td> <td class="c_weekend c_td">8</td> </tr> <tr> <td class="c_week ">46</td> <td class="c_td">9</td> <td class="c_td">10</td> <td class="c_td">11</td> <td class="c_td">12</td> <td class="c_td">13</td> <td class="c_weekend c_td">14</td> <td class="c_weekend c_td">15</td> </tr> <tr> <td class="c_week" >47</td> <td class="c_td">16</td> <td class="c_td">17</td> <td class="c_td">18</td> <td class="c_expedition c_td">19 <span class="c_expeditiontext"> Thursday the 19th of November all pupils will have an expedition to damlia, our local dam. There we will learn more about insects and other wildlife near the dam. The trip will be from 08:00 to 15:00. Meet at the main entrance 07.45 and remember to pack a lunch!</span> </td> <td class="c_td">20</td> <td class="c_weekend c_td">21</td> <td class="c_weekend c_td">22</td> </tr> <tr> <td class="c_week ">48</td> <td class="c_talent c_td">23 <span class="c_talenttext"> 23rd of november is the time for the biyearly talentshow! The show will take place in auditorium A1 at 18.00 til 21.00.</span> </td> <td class="cr_talent c_td">24 <span class="cr_talenttext"> This is a rerun of yesterdays talentshow, except this time parents are welcome as well! (at auditorium A1 18.00 - 21:00)</span> </td> <td class="c_td">25</td> <td class="c_td">26</td> <td class="c_td">27</td> <td class="c_weekend c_td" >28</td> <td class="c_weekend c_td">29</td> </tr> <tr> <td class="c_week ">49</td> <td class="c_td">30</td> <td class="c_graydays c_td" >1</td> <td class="c_graydays c_td" >2</td> <td class="c_graydays c_td" >3</td> <td class="c_graydays c_td" >4</td> <td class="c_graydays c_weekend c_td" >5</td> <td class="c_graydays c_weekend c_td" >6</td> </tr> </table> </div> </body> </html>
這是發布我的問題的文本 這是發布我的問題的文本 這是發布我的問題的文本 這是發布我的問題的文本 這是發布我的問題的文本 這是發布我的問題的文本 這是發布我的問題的文本 這是發布我的問題的文本 這是發布我的問題的文本 這是發布我的問題的文本 這是發布我的問題的文本 這是發布我的問題的文本
1 個解決方案
解決方案1
1 已采納 2020-10-30 16:32:31
將width: 100%僅應用於表格本身 ( #c_calendar )，而不應用於單元格或其他元素（即從.c_calendar, .c_th, .c_td, .c_week的規則中刪除它）。
如果您希望第一列比其他列寬，您可以對其應用min-width設置。
編輯：如果您希望所有其他單元格始終具有相同的寬度，您可以將min-width到.c_td ，我剛剛在下面的代碼段中添加了它。
要強制所有單元格具有相同的寬度（如果可能，取決於內容），您還可以簡單地將min-width應用於td （也可能是th ）。
/* basic style*/ .c_container{ margin:0 auto; width: 80%; height: auto; } .c_week{ font-weight: bold; background-color: rgba(255,0,0,0.2); } .c_td { min-width: 50px; } .c_td:hover{ background-color: #add8e6; } .c_November{ text-align: center; background-color: #CDCDCD; } .c_weekdays{ color: black; background-color: #D0F0C0; } #c_calendar { width: 100%; } .c_calendar, .c_th, .c_td, .c_week{ table-layout: fixed; text-align: center; font-size: 20px; border:3px solid #000; border-collapse: collapse; cursor: pointer; } .c_td{ text-align: left; vertical-align: top; font-size: 10px; } /* markere helg */ .c_weekend{ background-color: #FED8E1; } /* markerer datoer som ikke er i november */ .c_graydays{ background-color: #D3D3D3; } /* markere spesielle hendelser*/ .c_expedition, .c_talent, .cr_talent{ background-color: #FFFCBB; } /* hover*/ .c_expedition .c_expeditiontext { visibility: hidden; color: white; background-color: black; text-align: center; position: absolute; z-index: 2; border-radius: 8px; padding: 10px; } .c_expedition:hover .c_expeditiontext { visibility: visible; } .c_talent .c_talenttext { visibility: hidden; color: white; background-color: black; text-align: center; position: absolute; z-index: 2; border-radius: 8px; padding: 10px; } .c_talent:hover .c_talenttext { visibility: visible; } .cr_talent .cr_talenttext { visibility: hidden; color: white; background-color: black; text-align: center; position: absolute; z-index: 2; border-radius: 8px; padding: 10px; } .cr_talent:hover .cr_talenttext { visibility: visible; }
<!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Calendar</title> <link rel="stylesheet" href="calendar.css"> <script type="text/javascript" src="calendar.js" async></script> </head> <body> <div class="c_container"> <div class="c_November" > <h2 id="c_title">November 2020</h2> </div> <table id="c_calendar" > <tr> <th class="c_weekdays c_th">Week</th> <th class="c_weekdays c_th">Mon</th> <th class="c_weekdays c_th">Tue</th> <th class="c_weekdays c_th">Wed</th> <th class="c_weekdays c_th">Thu</th> <th class="c_weekdays c_th">Fri</th> <th class="c_weekdays c_th">Sat</th> <th class="c_weekdays c_th">Sun</th> </tr> <tr> <td class="c_week " >44</td> <td class="c_graydays c_td" >26</td> <td class="c_graydays c_td" >27</td> <td class="c_graydays c_td" >28</td> <td class="c_graydays c_td" >29</td> <td class="c_graydays c_td" >30</td> <td class="c_graydays c_weekend c_td" >31</td> <td class="c_weekend c_td">1</td> </tr> <tr> <td class="c_week " >45</td> <td class="c_td">2</td> <td class="c_td">3</td> <td class="c_td">4</td> <td class="c_td">5</td> <td class="c_td">6</td> <td class="c_weekend c_td">7</td> <td class="c_weekend c_td">8</td> </tr> <tr> <td class="c_week ">46</td> <td class="c_td">9</td> <td class="c_td">10</td> <td class="c_td">11</td> <td class="c_td">12</td> <td class="c_td">13</td> <td class="c_weekend c_td">14</td> <td class="c_weekend c_td">15</td> </tr> <tr> <td class="c_week" >47</td> <td class="c_td">16</td> <td class="c_td">17</td> <td class="c_td">18</td> <td class="c_expedition c_td">19 <span class="c_expeditiontext"> Thursday the 19th of November all pupils will have an expedition to damlia, our local dam. There we will learn more about insects and other wildlife near the dam. The trip will be from 08:00 to 15:00. Meet at the main entrance 07.45 and remember to pack a lunch!</span> </td> <td class="c_td">20</td> <td class="c_weekend c_td">21</td> <td class="c_weekend c_td">22</td> </tr> <tr> <td class="c_week ">48</td> <td class="c_talent c_td">23 <span class="c_talenttext"> 23rd of november is the time for the biyearly talentshow! The show will take place in auditorium A1 at 18.00 til 21.00.</span> </td> <td class="cr_talent c_td">24 <span class="cr_talenttext"> This is a rerun of yesterdays talentshow, except this time parents are welcome as well! (at auditorium A1 18.00 - 21:00)</span> </td> <td class="c_td">25</td> <td class="c_td">26</td> <td class="c_td">27</td> <td class="c_weekend c_td" >28</td> <td class="c_weekend c_td">29</td> </tr> <tr> <td class="c_week ">49</td> <td class="c_td">30</td> <td class="c_graydays c_td" >1</td> <td class="c_graydays c_td" >2</td> <td class="c_graydays c_td" >3</td> <td class="c_graydays c_td" >4</td> <td class="c_graydays c_weekend c_td" >5</td> <td class="c_graydays c_weekend c_td" >6</td> </tr> </table> </div> </body> </html>
table-layout：固定的CSS無法在給定的列寬下正常工作
[英]table-layout: fixed css not working properly with given column's width
像“table-layout：fixed”之類的東西，但僅限於一個table-column
[英]Something like “table-layout:fixed” but only for one table-column
固定表格布局，但一列調整為內容？ （僅HTML和CSS）
[英]Fixed table layout, but one column adjusting to content? (HTML and CSS only)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.