Bảng HTML: tỷ lệ phần trăm cột

Question

Tôi có một bảng có 7 cột. Tôi muốn các cột là có độ rộng sau:

• 3 cột x width=20%
• 4 cột x width=10%

Tôi đã tạo ra 2 lớp CSS, mỗi chiều rộng và tôi gán chúng cho mỗi ô.

Điều tôi có và điều đó không hiệu quả. Thay vào đó, chiều rộng luôn bao bọc nội dung. Nếu tôi chỉ cần đặt một chữ cái, hơn chiều rộng sẽ rất nhỏ, nếu tôi đặt chuỗi lớn, chiều rộng sẽ quá lớn. Tôi muốn nó liên tục.

CSS & HTML:

table { 
 
    width: 100%; 
 
} 
 
.ten { 
 
    width: 10% 
 
} 
 
.twenty { 
 
    width: 20%; 
 
}

<table> 
 
    <tr> 
 
    <th class="ten">H1</th> 
 
    <th class="ten">H2</th> 
 
    <th class="ten">H3</th> 
 
    <th class="twenty">H4</th> 
 
    <th class="twenty">H5</th> 
 
    <th class="twenty">H6</th> 
 
    <th class="ten">H7</th> 
 
    </tr> 
 

 
    <tr> 
 
    <td class="ten">A1</td> 
 
    <td class="ten">A2</td> 
 
    <td class="ten">A3</td> 
 
    <td class="twenty">A4</td> 
 
    <td class="twenty">A5</td> 
 
    <td class="twenty">A6</td> 
 
    <td class="ten">A7</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td class="ten">B1</td> 
 
    <td class="ten">B2</td> 
 
    <td class="ten">B3</td> 
 
    <td class="twenty">B4</td> 
 
    <td class="twenty">B5</td> 
 
    <td class="twenty">B6</td> 
 
    <td class="ten">B7</td> 
 
    </tr> 
 

 
</table>

một ai đó có thể giải thích làm thế nào để đạt được những gì mà tôi muốn?

Answer 1

Để sửa chiều rộng, bạn có thể sử dụng table-layout:fixed;.

Bạn cũng có thể muốn sử dụng các thẻ colgroup and col để gán cùng một lúc chiều rộng và bg cho các cột của mình.

table { 
 
    width: 100%; 
 
    table-layout: fixed; 
 
} 
 
.ten { 
 
    width: 10%; 
 
    background: tomato; 
 
} 
 
.twenty { 
 
    width: 20%; 
 
    background: turquoise 
 
} 
 
/* see me */ 
 
td { 
 
    border: solid; 
 
} 
 
/* play with bg cells and cols ? */ 
 

 
tr:nth-child(even) :nth-child(odd) { 
 
    background:rgba(100,255,50,0.3); 
 
    } 
 
tr:nth-child(odd) :nth-child(even) { 
 
    background:rgba(255,255,255,0.3); 
 
    }

<table> 
 
    <colgroup> 
 
    <col class="ten" /> 
 
    <col class="ten" /> 
 
    <col class="ten" /> 
 
    <col class="twenty" /> 
 
    <col class="twenty" /> 
 
    <col class="twenty" /> 
 
    <col class="ten" /> 
 
    </colgroup> 
 
    <tr> 
 
    <th>H1</th> 
 
    <th>H2</th> 
 
    <th>H3</th> 
 
    <th>H4</th> 
 
    <th>H5</th> 
 
    <th>H6</th> 
 
    <th>H7</th> 
 
    </tr> 
 

 
    <tr> 
 
    <td>A1</td> 
 
    <td>A2</td> 
 
    <td>A3</td> 
 
    <td>A4</td> 
 
    <td>A5</td> 
 
    <td>A6</td> 
 
    <td>A7</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>B1</td> 
 
    <td>B2</td> 
 
    <td>B3</td> 
 
    <td>B4</td> 
 
    <td>B5</td> 
 
    <td>B6</td> 
 
    <td>B7</td> 
 
    </tr> 
 
<tr> 
 
    <td>A1</td> 
 
    <td>A2</td> 
 
    <td>A3</td> 
 
    <td>A4</td> 
 
    <td>A5</td> 
 
    <td>A6</td> 
 
    <td>A7</td> 
 
    </tr> 
 

 
    <tr> 
 
    <td>B1</td> 
 
    <td>B2</td> 
 
    <td>B3</td> 
 
    <td>B4</td> 
 
    <td>B5</td> 
 
    <td>B6</td> 
 
    <td>B7</td> 
 
    </tr> 
 

 
</table>

Answer 2

Thêm phần này vào CSS của bạn

td { 
    word-break: break-all; 
    //or 
    word-wrap: break-word; 
} 

word-break: break-all; kết thúc tốt đẹp từ lâu để dòng tiếp theo, nhưng sẽ giữ lời đơn toàn

max-dimension 

sẽ trở thành

max- 
dimension 

Trong khi word-wrap: break-word sẽ cắt một từ bất kỳ nơi nào miễn là nó sẽ vừa với ô.

max-dimension 

có thể trở thành

max-dim 
ension 

Answer 3

CSS của bạn hoạt động như mong đợi, trong một cách mà độ rộng của người đứng đầu bảng và các tế bào là chính xác. Tuy nhiên:

th theo mặc định có căn chỉnh văn bản: được áp dụng trung tâm, trong khi phần tử td thì không.

Vì vậy, bạn nên thêm vào td hoặc th căn chỉnh văn bản giống nhau. Ví dụ:

th { 
    text-align: left; 
}