web前端基础-给td设置宽度

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

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

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

2.给table标签，定一个宽度（如：width:500px）;

3.最后给td 定一个宽度（width）就可以实现.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>#main_table{float: left;table-layout: fixed;/*使table的宽度固定*/width: 500px;/*给table一个宽度*/}.host_style{width: 250px;/*给td定一个宽度,在这里有3个td，其他3个td都没有设置宽度，所以这3个td的宽度之和是table的定义的宽度-td(定义了宽度)*/}button{width: 50px;height: 30px;float: left;margin-bottom: 10px;margin-right: 6px}
</style>
<script></script>
<body><div style="width: 200px;margin: 10%;"><button value="all">all</button><button value="invert">invert</button><button value="edit">edit</button><table id='main_table' border="1px solid" ><tr><td>select</td><td class="host_style">host_name</td><td>port</td><td>status</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td></tr><tr><td>1</td><td>1</td><td>1</td><td>1</td></tr></table></div></body>
</html>

web前端基础-给td设置宽度相关推荐

WEB前端基础（HTML+CSS+JavaScript）（上）最好看最详细的笔记~
WEB前端基础当前部分是基于HTML与CSS总结,后续有JavaScript更新~ 文章目录 WEB前端基础一.HTML概述(阶段1 入门概述) 1.HTML 二.第一个HTML页面 1.HTML ...
web前端基础与CSS入门
web前端基础 1.嵌套列表注:列表之间可以互相嵌套,形成多层级的列表. <!DOCTYPE html> <html lang="en"> <hea ...
HTML及CSS基础入门：web前端基础，看这一篇就够了
写在开头:这是一篇有关于HTTP和CSS的基础入门教程.你也可以将他当作一本字典,因为我将所有可能用到的语法结构全部设置了标题,你只需要点击标题即可跳转过去.同时,我在最后放置了两个CSS实战,以供读 ...
iframe跨域调用js_郑州Web前端基础学习之JS跨域知识梳理
JS是Web前端开发三要素之一,是郑州Web前端基础学习中非常重要的知识点.JS涉及的知识点多且杂,很多同学反映不知如何下手,事实上,只要你认真记.多练习,就可以慢慢掌握它.今天千锋郑州Web前端培训 ...
Web前端基础知识整理
1. 前端基础知识文件分类 XML(扩展标记语言) 装载有格式的数据信息,用于各个框架和技术的配置文件描述特点: 扩展名为.xml 内容区分大小写标签要成对出现,形成容器,只能有一个标签按正确 ...
html clear属性值,【Web前端基础知识】clear使用方法
[摘要] 前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页.下面是[Web前端基础知识]clear使用方法,小编建议有准备参加考试的备考生一定要合理规划时间,仔细阅读相关规定,提 ...
[html] table中给td设置宽度无效怎么解决？
[html] table中给td设置宽度无效怎么解决? 默认是列宽度由单元格内容设定 table 添加css tableLayout :fixed; 个人简介我是歌谣,欢迎和大家一起交流前后端知识. ...
html 单元格被撑开_表格单元格td设置宽度无效始终有内部的内容撑开
摘要:这篇HTML栏目下的"表格单元格td设置宽度无效始终有内部的内容撑开",介绍的技术点是"表格单元格.设置宽度.宽度无效.单元格.单元.设置",希望对大家开 ...
td 内容自动换行 table表格td设置宽度后自动换行
td 内容自动换行 table表格td设置宽度后自动换行控制样式 table { table-layout:fixed; WORD-BREAK:break-all; } td { word-wrap ...

web前端基础-给td设置宽度

web前端基础-给td设置宽度相关推荐

最新文章

热门文章