div 能像 td 自适应宽度不

Question

<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

Answer 1

首先回答问题，能。

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

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

Answer 2

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>

Answer 3

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

Answer 4

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

Answer 5

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