1. 首頁
  2. 問答
  3. Html表格寬度

Html表格寬度

2014-05-20 158 views
-1

我有一個HTML表格，如果表格體積很大，它將從頁面邊框走出。 當我將寬度設置爲100％時，它仍然不適合屏幕。Html表格寬度

如何使桌子適合屏幕。

<table width="100%">

上面的代碼無法正常工作，如果表身比屏幕尺寸大

來源

2014-05-20 user3505725

+0

一個JFiddel會有所幫助，mayebe這是在錯誤的DIV。 – Kjenos

+0

請勿使用HTML屬性來設置'

';改用CSS。 – Raptor

+0

默認段落中的單詞應該自動換行。請在JSFiddle中提供示例內容。 – Raptor

回答

1

不要把細胞中的內容不能自動換行，足以讓所有的細胞足夠窄讓表格適合分配給它的空間。

來源

2014-05-20 08:19:24 Quentin

1

您應該在CSS中將表佈局設置爲固定爲。

看看這個jsfiddle。

<table> 
    <tr> 
     <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget tempor ligula, non ultricies lacus. Cras sed sapien nec tortor porttitor ornare quis et erat. Nunc molestie sodales sem, in volutpat leo ultrices sed. Ut vel orci magna. Nulla vitae mi venenatis, auctor nulla et, rutrum nibh. Phasellus sollicitudin, purus vitae mollis pretium, nibh leo ullamcorper ligula, vel porta libero metus nec mauris. Pellentesque quis tellus dui. Duis id justo libero. Fusce sagittis, metus ut vestibulum ullamcorper, ligula urna vulputate ipsum, vel condimentum orci enim nec nulla. Fusce viverra metus at porta suscipit. Praesent suscipit blandit cursus. Nulla dignissim sodales posuere. Etiam posuere porta sem. 

Donec commodo ut est sit amet blandit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse non felis id nunc bibendum consequat ut quis orci. Ut mattis purus mi, quis dictum risus sollicitudin at. Pellentesque eu molestie metus. Donec aliquet nulla tellus, non rhoncus velit convallis imperdiet. Nam vitae ullamcorper nisi, ut condimentum eros. 

Etiam mollis, augue quis suscipit cursus, mauris risus mollis tellus, sit amet tincidunt augue eros sed erat. Fusce mattis erat nec est molestie, at sodales nisl posuere. Nam quis tellus nisi. Proin pharetra sapien nec blandit sollicitudin. Donec et leo egestas, accumsan eros non, scelerisque magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Morbi porta molestie diam, id mattis nisl suscipit sit amet. Suspendisse iaculis erat vel venenatis eleifend. Ut ipsum urna, vulputate vitae lacus vitae, aliquam adipiscing nisi. Sed molestie bibendum pretium. Morbi vel rutrum nulla, nec luctus elit. Nunc interdum aliquet adipiscing. Nam purus nisl, mollis nec porttitor et, mattis ut ipsum. Aliquam fermentum tristique tellus, aliquam mollis est pulvinar non. Nam cursus risus orci, non euismod nisl vestibulum pretium. 

Nulla eleifend lacus eu eleifend consequat. Morbi dapibus diam in laoreet ullamcorper. Nulla commodo quam nisl, lacinia adipiscing purus mollis et. Ut eleifend aliquam felis sollicitudin congue. Nam facilisis lacus erat, a consequat eros laoreet nec. Mauris consequat sodales nulla sed accumsan. Maecenas condimentum ullamcorper felis, non aliquam lorem interdum vel. Nulla facilisi. In vehicula eros sit amet nulla lacinia malesuada eget sed neque. Sed ante mauris, ultrices vel tempus sit amet, aliquet in enim. 

Fusce ultrices dui enim, id aliquam diam placerat non. Donec volutpat interdum nisl et rutrum. In vulputate porttitor nunc ac luctus. Mauris non vulputate nibh. Etiam ut lorem quis sem semper ultrices. Sed varius nunc ac eleifend hendrerit. Nam in vehicula nunc. Nulla ac diam ac magna malesuada facilisis in lobortis lacus. Cras cursus nec erat eget cursus. Maecenas ac mauris non augue vehicula porta et viverra sapien. Suspendisse consequat eu sapien vel sollicitudin. Morbi mollis sollicitudin hendrerit. Donec eu cursus mauris.</td> 
    </tr> 
</table>

CSS：

table { 
    width: 100%; 
    table-layout: fixed; 
} 

td { 
    white-space: nowrap; 
    overflow: hidden; 
}

正如你所看到的，細胞中含有大量的文字，我從包裹阻止。該表設置爲100％寬度，但沒有固定的佈局，但仍然需要儘可能多的寬度以適應其最大的單元格。

使用固定佈局，無論在單元內發生什麼，它都將保持100％寬。

試評，並取消在樣式表聲明以下行，見證了區別：

table-layout: fixed;

來源

2014-05-20 08:28:48

+0

'word-wrap' CSS也可以提供幫助。 – Raptor

相關問題

 相關問題