代码之家 › 专栏 › 技术社区 › 3gwebtrain

桌体未展开至全宽

css html

-1

3gwebtrain · 技术社区 · 6 年前

table {
  border:1px solid red;
  width:100%;
  position: relative;
}

table tbody {
  height:100px;
  overflow-y:auto;
  display:block;
}

table tbody tr {
  display:table;
  width:100%;
}

td,th {
  text-align: center;
}

<div>
  <table>
  <thead>
    <tr>
      <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr><tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
  </tbody>
</table>
</div>

由于某些原因,车身没有100%膨胀。有人知道这个问题吗?

3 回复 | 直到 6 年前

Vitikka 6 年前

你在上有css样式 table tbody tr 收件人: display: table; 以及 table tbody { display: block; }

删除这些,问题应该得到解决。

编辑:PS,为了在需要时保持表格高度和滚动,我会将表格包装成一个div,并将div设置为如下内容:

div.table-wrap {
  height: 100px;
  overflow-y:auto;
}

elias.hj 6 年前

如果要确保某个元素的宽度与视口一样宽,请将宽度设置为100vw,或者确保元素的每个父元素的宽度都为100%,一直到html标记为止。

正如维蒂卡指出的,你不应该显示:表格打开tr标签。

Dharman vijay 6 年前

你可以用这个例子,它将工作猜测你正在使用引导!

<table style="width:100%;">

在table标记内,您可以添加样式,而无需将它们放在CSS文件中。另一个使用引导的示例:

<table class="bg-dark text-white" style="width:100%;">

您也可以使用style标记来设置任何td或tr标记的样式。

<th class="text-center text-white" style="text-transform:uppercase;">Content goes here</th>

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Jamie · 在CSS链接的文件名中添加Jinja占位符

1 年前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

1 年前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

1 年前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

1 年前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

1 年前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

1 年前