广告
返回顶部
首页 > 资讯 > 前端开发 > html >html表格单元格td设置宽度无效怎么办
  • 294
分享到

html表格单元格td设置宽度无效怎么办

2024-04-02 19:04:59 294人浏览 独家记忆
摘要

小编给大家分享一下html表格单元格td设置宽度无效怎么办,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!   在做table页

小编给大家分享一下html表格单元格td设置宽度无效怎么办,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

  在做table页面时,有时对td设置的宽度是无效的,td的宽度始终有内部的内容撑开,可以设置padding,但直接设置width却无效,下面我们来具体看下这个示例:

  <div>

  <tableborder="1px">

  <tr>

  <tdwidth="100px"style="width:100px!important;">1000800</td>

  <td>1000000</td>

  <td>1000000</td>

  </tr>

  <tr>

  <td>1000000</td>

  <td>10000300</td>

  <td>1000000</td>

  </tr>

  </table>

  </div>

  <tableborder="1px">

  <tr>

  <tdwidth="100px">1000000</td>

  <td>1000000</td>

  <td>1000000</td>

  </tr>

  <tr>

  <td>1000000</td>

  <td>10000300</td>

  <td>1000000</td>

  </tr>

  </table>

  *{margin:0;padding:0;}

  .div1{position:relative;width:150px;height:100px;overflow:scroll;border:1pxsolidred;}

  我们可以看到,类div1中的第一个单元格虽然设置了宽度,但是却是无效的。单元格内容始终由内容而决定,那么既然是由内容决定的那么我们就想办法让“内容”把单元格撑开,这样就行了。

  我们可以在td中加个div,然后给div设置宽度,来试一下:

  修改类div1中的一部分代码:

  <tdwidth="100px"style="width:100px!important;">1000800</td>

  修改为

  <td><div>1000800</div></td>

  然后在样式里写入:

  tddiv{

  width:100px;

  }

以上是“html表格单元格td设置宽度无效怎么办”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网html频道!

--结束END--

本文标题: html表格单元格td设置宽度无效怎么办

本文链接: https://www.lsjlt.com/news/92490.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • html表格单元格td设置宽度无效怎么办
    小编给大家分享一下html表格单元格td设置宽度无效怎么办,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!   在做table页...
    99+
    2022-10-19
  • 如何解决表格设置table-layout:fixed后对单元格宽度设置无效的问题
    本篇内容主要讲解“如何解决表格设置table-layout:fixed后对单元格宽度设置无效的问题”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何解决表格设置...
    99+
    2022-10-19
  • 怎么使用html设置表格宽度
    今天小编给大家分享一下怎么使用html设置表格宽度的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。HTML中,我们可以使用&l...
    99+
    2023-07-06
  • uniapp中table表格设置宽度无效的原因以及解决方法
    目录前言一、示例二、原因三、拓展总结table表格设置标题无效解决办法及原因探索 此属性并不只限于uniapp同时适用于普通表格设置 前言 本篇文章讲解了,实际开发中发现表格设置的宽...
    99+
    2023-05-14
    table宽度不生效 vue中的table uniapp table表格设置宽度
  • css table width表格宽度样式怎么设置定义
    这篇文章主要介绍了css table width表格宽度样式怎么设置定义的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇css table width表格宽度样式怎么设置定义文章...
    99+
    2022-10-19
  • HTML中怎么把表格元素设置为collapse
    这篇“HTML中怎么把表格元素设置为collapse”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看...
    99+
    2022-10-19
  • layui-table单元格设置为百分比在ie8下不能自适应怎么办
    这篇文章主要为大家展示了“layui-table单元格设置为百分比在ie8下不能自适应怎么办”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“layui-table...
    99+
    2022-10-19
  • HTML文档流中设置元素浮动导致父元素高度无法自适应怎么办
    小编给大家分享一下HTML文档流中设置元素浮动导致父元素高度无法自适应怎么办,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!  ...
    99+
    2022-10-19
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作