DIV+CSS实现两边自适应宽度,中间固定宽度

html-css015

DIV+CSS实现两边自适应宽度,中间固定宽度,第1张

两边如果要放内容的话 就用table

<table width="100%">

<tr>

<td>左边自适应</td>

<td width="100">中间固定宽度</td>

<td>右边自适应</td>

</tr>

</table>

如果只是加个背景的话 这样写就行

<div style="width:100%background:url(xxx) no-repeat center center">

<div style="width:100pxmargin:0 auto">中间固定宽度</div>

</div>

1、首先给table标签添加css : table-layout:fixed这里是为了让整个table有一个自己宽度,而不是让table自己随着自己内容的大小而改变。

2、给table标签,定一个宽度(如:width:500px)

3、最后给td 定一个宽度(width)就可以实现.

原表格:

添加一下CSS:

现表格:

扩展资料:

在实际需求中,经常遇到要在table中的td中,让用户输入比较长的字符串,这时就要使td的宽度能较大。

在WEB前端中,对于 表格元素中的元素td 直接设置宽度是无法生效的。要想达到给td设置宽度的目地。

给你提供个思路,在表格里套表格:把除第一行和第一列外的td合并,然后在里面添加一个

<div>

<table>

</table>

</div>

其中table里放什么东西自己定,最后设计CSS:

给div设定一个宽度和一个高度,并设置overflow:auto属性

这样就会根据你table里的内容自动出现滚动条,但有一点,滚动条是在div标签出现,而不是你提供的图片那样(在外部表格的"局部"出现(这种估计实现不了))