Làm cách nào để sửa chiều cao của TR?

Question

Có thể sửa chiều cao của một hàng (tr) trên bàn không?

Sự cố xuất hiện khi tôi thu hẹp cửa sổ trình duyệt, một số hàng bắt đầu phát xung quanh và tôi không thể sửa chiều cao của hàng.

Tôi đã thử nhiều cách: tr width="20"/tr style="height:20px"/td height="20"/td style="height:20px"

Tôi đang sử dụng IE7

Phong cách

.tableContainer{ 
    color:#0076BF; 
    margin: -10px 0px -10px 0px; 
    border-spacing: 10px; 
    empty-cells:show; 
    width:90%; 
    text-align:left; 
} 

.tableContainer tr td{ 
    white-space:nowrap; 
    text-align:left; 
} 

mã HTML.

<table class="tableContainer" cellspacing="10px"> 
    <tr style="height:15px;"> 
     <td>NHS Number</td> 
     <td>&#160;</td> 
     <td>Date of Visit</td> 
     <td>&#160;</td> 
     <td colspan="3">Care Time Started</td> 
     <td>&#160;</td> 
     <td rowspan="2" style="text-align:right;vertical-align:bottom;">&#9745;</td> 
     <td rowspan="2" style="font-weight:bold;vertical-align:bottom;">Tick when<br/>      care starts</td> 
    </tr> 
    <tr> 
     <td width="90" class="tableContainerRow2">&#160;</td> 
     <td >&#160;</td> 
     <td width="80" class="tableContainerRow2">&#160;</td> 
     <td >&#160;</td> 
     <td width="40" class="tableContainerRow2">&#160;</td> 
     <td width="5">:</td> 
     <td width="40" class="tableContainerRow2">&#160;</td>   
     <td >&#160;</td> 
    </tr> 
</table> 

Answer 1

Bảng có tính iffy (ít nhất, trong IE) khi nói đến sửa chiều cao chứ không phải gói văn bản. Tôi nghĩ rằng bạn sẽ thấy rằng giải pháp duy nhất là đưa các văn bản bên trong một yếu tố div, như vậy:

td.container > div { 
 
    width: 100%; 
 
    height: 100%; 
 
    overflow:hidden; 
 
} 
 
td.container { 
 
    height: 20px; 
 
}

<table> 
 
    <tr> 
 
     <td class="container"> 
 
      <div>This is a long line of text designed not to wrap 
 
       when the container becomes too small.</div> 
 
     </td> 
 
    </tr> 
 
</table>

Bằng cách này, chiều cao của div là của tế bào chứa và văn bản không thể phát triển div, giữ cho ô/hàng có cùng chiều cao bất kể kích thước cửa sổ là bao nhiêu.

Answer 2

Hãy thử đặt chiều cao thành một trong những tế bào, như thế này:

<table class="tableContainer" cellspacing="10px"> 
<tr> 
    <td style="height:15px;">NHS Number</td> 
    <td>&#160;</td> 

Lưu ý tuy nhiên, bạn sẽ không thể làm cho các tế bào nhỏ hơn so với nội dung đòi hỏi nó được. Trong trường hợp đó, bạn sẽ phải làm cho văn bản nhỏ hơn trước.

Answer 3

Chiều rộng bảng của bạn là 90% tương ứng với vùng chứa của nó.

Nếu bạn siết chặt trang, có thể bạn cũng đang nén chiều rộng của bảng. Chiều rộng của các ô cũng giảm và trình duyệt bù lại bằng cách tăng chiều cao.

Để có chiều cao không bị ảnh hưởng, bạn phải đảm bảo độ rộng của các ô có thể chứa nội dung có chủ ý. Sửa chiều rộng bảng có thể là thứ bạn muốn thử. Hoặc có thể chơi xung quanh với độ rộng tối thiểu của bảng.

Answer 4

Đó là vì các từ được gói và đang diễn ra các dòng mới do đó kéo dài TR. Điều này sẽ khắc phục vấn đề của bạn:

overflow:hidden; 

Đặt rằng trong phong cách TR Mặc dù nó sẽ làm việc, tại sao không chỉ để cho nó căng o0

PS. i aint đã thử nghiệm nó để không ghét XD

Answer 5

Thiết lập chiều cao td đến dưới các tự nhiên chiều cao của nội dung của nó

Kể từ tế bào bảng muốn có ít nhất đủ lớn để bọc nội dung của họ, nếu nội dung không có chiều cao rõ rệt, các tế bào có thể tùy ý thay đổi kích thước.

Bằng cách thay đổi kích thước các ô, chúng tôi có thể kiểm soát chiều cao hàng.

Một cách để làm điều này, là để thiết lập nội dung với một vị trí absolute trong tế bào relative, và thiết lập các height của tế bào, và left và top của nội dung.

table { 
 
    width: 100%; 
 
} 
 
.set-height td { 
 
    position: relative; 
 
    overflow: hidden; 
 
    height: 2em; 
 
} 
 
.set-height p { 
 
    position: absolute; 
 
    margin: .1em; 
 
    left: 0; 
 
    top: 0; 
 
}

<table><tbody> 
 
    <tr class="set-height"><td><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></td></tr> 
 
    <tr><td>Foo</td></tr> 
 
    <tr><td>Bar</td></tr> 
 
    <tr><td>Baz</td></tr> 
 
    <tr><td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</td></tr> 
 
</tbody></table>

Answer 6

tôi phải làm điều này để có được những kết quả mà tôi muốn:

<td style="font-size:3px; float:left; height:5px; vertical-align:middle;" colspan="7"><div style="font-size:3px; height:5px; vertical-align:middle;"><b><hr></b></div></td> 

Nó từ chối làm việc với chỉ ô hoặc div và cần cả hai.

Answer 7

Đưa div vào trong một td làm cho nó hoạt động cho tôi.

<table width="100%"> 
    <tr><td><div style="font-size:2px; height:2px; vertical-align:middle;">&nbsp;</div></td></tr>