Làm thế nào để làm tiêu đề bảng html span nhiều dòng

Question

Tôi có một số tiêu đề bảng như:

<table> 
    <tr> 
     <th> 
      Invoice Number 
     </th> 
     <th> 
      Invoice Date 
     </th> 

... 

Tôi muốn để có được những lời khác nhau trên các dòng khác nhau trong tiêu đề vì vậy tôi đã làm điều này:

<table> 
    <tr> 
     <th> 
      Invoice<br />Number 
     </th> 
     <th> 
      Invoice<br />Date 
     </th> 

... 

Tác phẩm này hoạt động nhưng tôi không chắc liệu nó có tuân theo các phương pháp hay nhất hay không. Tôi đã nghe nói trên một webcast mà bạn không nên thực sự sử dụng <br /> nữa và không nên sử dụng thẻ để định dạng đầu ra của bạn trông như thế nào nhưng nên sử dụng css để bạn có thể thay đổi nó dễ dàng hơn.

Có ai có thể đề xuất cách tốt hơn để thực hiện việc này không?

Answer 1

Bạn có thể thử đặt một div bên trong thứ với chiều rộng và chiều cao cụ thể để ép từ thứ hai xuống.

Answer 2

Bạn có thể thiết lập độ rộng cho tất cả các tiêu đề bảng của bạn với điều này:

th {width: 60px;} 

hoặc bạn có thể gán một lớp học, do đó bạn chỉ cần thực hiện một số trong số họ hẹp hơn:

th.narrow {width: 60px;} 

Bạn có thể điều chỉnh kích thước phông chữ và chiều rộng khi cần thiết.

Một lưu ý phụ: đừng quên thêm phạm vi cho trợ năng. Nếu dữ liệu nằm bên dưới các ô tiêu đề của bạn thì hãy sử dụng

<th scope="col"> 

và đặt thứ vào phần thead và ô td trong phần tbody. Nếu các tế bào tiêu đề của bạn là ở phía bên trái của bảng và các tế bào liên quan đến các tiêu đề là ở bên phải, sau đó sử dụng

<th scope="row">. 

Answer 3

Bạn có thể mã hóa nó như:

<table> 
    <tr> 
     <th> 
      <div>Invoice</div><div>Number</div> 
     </th> 
     <th> 
      <div>Invoice</div><div>Date</div> 
     </th> 

... 

Mặc dù thẳng thắn, tôi thấy không có gì sai với việc sử dụng thẻ <br />.

Answer 4

Bạn có thể đặt word-spacing thành kích thước đủ lớn. Cá nhân tôi có lẽ sẽ chỉ để cho nó không quấn.

Tôi đã hy vọng có thể tìm thấy thuộc tính CSS cụ thể để buộc vi phạm trên không gian trắng, nhưng không (khi tìm kiếm cursory). Trong trường hợp đôi mắt của bạn tốt hơn tôi: http://w3.org/tr/css3-text/