table 設定邊距,td內容過長用省略號代替

2022-06-21 20:00:09 字數 1798 閱讀 4006

table:設定邊距,td內容過長用省略號代替

1.table:設定邊距

合併**邊框border-collapse: collapse,然後用th,td的padding設定內容和邊框之間的空隙padding。
2.td內容過長用省略號代替

在table中必須設定style:

table-layout: fixed;這條屬性就是讓table的內部布局固定大小。這個時候就用width屬性調節td的長度。之後在新增如下:td

1

doctype html

>

2<

html

>

3<

head

>

4<

meta

charset

="utf-8"

>

5<

title

>

title

>

6<

style

type

="text/css"

>

7.card

1415

table

23td

33style

>

34head

>

35<

body

>

36<

div

class

="card"

>

37<

table

border

="0"

>

38<

tr>

39<

td style

="text-align: right;width:30%;"

>請求型別:

td>

40<

td style

="width:70%;"

>維修

td>

tr>

41<

tr style

="font-size: 12px;"

>

42<

td style

="text-align: right;"

>使用者姓名:

td>

43<

td>張小三張小三張小三張小三張小三張小三張小三張小三張小三張小三張小三張小三

td>

44tr

>

45<

tr style

="font-size: 12px;"

>

46<

td style

="text-align: right;"

td>

47<

td>135********

td>

48tr

>

49<

tr style

="font-size: 12px;"

>

50<

td style

="text-align: right;"

td>

51<

td>2023年4月23日 16:30

td>

52tr

>

53table

>

54div

>

55body

>

56html

>

顯示結果:

設定div邊距

設定外邊距 margin top 20px margin right 30px margin bottom 40px margin left 30px margin 20px 只有乙個值,同時設定四個方向的值 margin 0 20px 兩個值,第乙個值是上下 x軸 第二個值是左右 y軸 margi...

td內容較多,造成table變形

大家應該很熟悉html的table標籤,table中的內容需要寫在td或者th中,當td中的內容過多是,table可能會變形,即使在tr和td設定了width和height,這時候可以用下面的幾條css,控制table不發生變形 table layout fixed word wrap break ...

css中設定table中的td內容自動換行

word break break all和word wrap break word都是能使其容器如div的內容自動換行。table裡 固定大小並且內容自動換行 給table 加上 table layout fixed word break break all word wrap break word...