html之如何根据内容自动调整表格 td 宽度

powertoolsteam 阅读:2029 2023-11-05 18:46:41 评论:0

首先请试着看看这个jsFiddle ,正如您所看到的,我有一个包含很多列的表格,我唯一的问题是如何让所有 td 根据其中文本的长度调整其宽度而不换行?

这是我的代码:

.content { 
  width: 1100px; 
  height: 200px; 
  background: #fdfdfd; 
  margin: 0px auto; 
  position: relative; 
  top: 40px; 
  border: 1px solid #aaaaaa; 
} 
 
.content .content-header { 
  width: 100%; 
  height: 40px; 
  background-color: #aaa; 
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc); 
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#cccccc)); 
  background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc); 
  background-image: -o-linear-gradient(top, #eeeeee, #cccccc); 
  background-image: linear-gradient(to bottom, #eeeeee, #cccccc); 
  border-bottom: 1px solid #aaaaaa; 
} 
 
.content-loader { 
  overflow: scroll; 
} 
 
.content-loader table { 
  width: auto; 
  background: #aaa; 
} 
 
.content-loader table tr { 
  background: #eee; 
} 
 
.content-loader table tr td {}
<div class="content"> 
  <div class="content-header"> 
 
  </div> 
  <div class="content-loader"> 
    <table> 
      <tbody> 
        <tr> 
          <td>First Name</td> 
          <td>Last Name</td> 
          <td>Gender</td> 
          <td>Birth Date</td> 
          <td>Address</td> 
          <td>Zip Code</td> 
          <td>Nationality</td> 
          <td>Contact Number</td> 
          <td>Email</td> 
          <td>Username</td> 
          <td>Course</td> 
          <td>Year</td> 
          <td>ID Number</td> 
          <td>Subjects</td> 
          <td>Other Fields</td> 
          <td>Other Fields</td> 
          <td>Other Fields</td> 
          <td>Other Fields</td> 
          <td>Other Fields</td> 
          <td>Other Fields</td> 
        </tr> 
      </tbody> 
    </table> 
  </div> 
</div>

有人可以帮我解决这个问题吗?或者,如果这里已经有人问过,请告诉我链接。

请您参考如下方法:

删除所有使用 CSS 设置的宽度,并将空白设置为 nowrap,如下所示:

.content-loader tr td { 
    white-space: nowrap; 
} 

如果您希望字段完整显示而不显得奇怪,我还会从容器中删除固定宽度(或将 overflow-x: scroll 添加到容器中)...

在这里查看更多信息:http://www.w3schools.com/cssref/pr_text_white-space.asp


标签:程序员
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

全民解析

全民解析

关注我们