首页 > div 能像 td 自适应宽度不

div 能像 td 自适应宽度不

<tr>
    <th>备份文件</th>
    <th>备份时间</th>
    <th>大小</th>
    <th width="10%">操作</th>
</tr>

其他3个th 会自动宽度

<div class="data-header">
    <div class="column">备份文件</div>
    <div class="column">备份时间</div>
    <div class="column">大小</div>
    <div class="column">操作</div>
</div>

怎么让 column 自动宽度 不要用 flex


首先回答问题,

然后要提到的一点是,按照你这个内容,应该是用table标签来写HTML结构才对,为什么要用div标签呢?数据表型的结构肯定是用表格来操作啊。

最后说明一下,因为你提到不能用flex,那么能实现的方式就是display:table。所以,HTML的结构要改一下,并且兼容性也不好。


加个样式就行:
<style type="text/css">
div.data-header div.column {display: inline-block;}
</style>


不要过度迷恋div,table不是一无是处


css.table, .table-list {
    display: table;
}
.table>*, .table-list>* {
    display: table-cell;
}

/* 响应式时候可以改变 */
@media(max-width: 320px){
    .table, .table-list, .table>*, .table-list>* {
        display: block;
    }
}

http://www.w3school.com.cn/cssref/pr_class_display.asp


Bootstrap grid system

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>
【热门文章】
【热门文章】