DIV使用显示表，显示表单元格，但一列固定宽度的

我基本上是试图做到这一点： Table with table-layout: fixed; and how to make one column wider DIV使用显示表，显示表单元格，但一列固定宽度的

E.G.有一个自动调整大小的列宽表，其中表格由divs而不是table tds等构成，但第一列的宽度固定，其余均匀分布以填充100％。

排序是这样的：

.intra { 
    display: table; 
    table-layout: fixed; 
    width: 100%; 
} 

.tit { 
    width: 90px; 
} 

.hover { 
    display: table-cell; 
    width: auto; 
}

除非你可以看到这不起作用：

jsFiddle

谢谢你，你可以借我的任何帮助。

来源

2016-08-12 françois Bonnal

在你的小提琴乍一看，这似乎需要'显示：table'您'.maketable'类，'显示：表row'你的'.intra' class“和”display：table-cell“放在你的'.tit'类上？ –

**错字提示**：它是一个**栏** - 不是“collum”.. –

你可以为这取决于你所需要的浏览器支持CSS表格代替Flexbox的。

body { 
 
    background-color: lightblue; 
 
} 
 
/*--------------------------*/ 
 

 
.maketable { 
 
    font-size: 7px; 
 
    width: 90%; 
 
    margin: 20px auto 17px auto !important; 
 
    border-radius: 6px; 
 
    overflow: hidden; 
 
    border: 1px solid gray; 
 
} 
 
.intra { 
 
    display: flex; 
 
    line-height: 15px; 
 
} 
 
.intra .hover { 
 
    flex: 1; 
 
    background: pink; 
 
    text-align: center; 
 
} 
 
.tit { 
 
    background-color: rgba(63, 191, 76, 0.25); 
 
    flex: 0 0 90px; 
 
    text-align: left; 
 
} 
 
.

<div class="maketable"> 
 
    <div class="intra"> 
 
    <div class="tit">Intranet</div> 
 
    <div class="hover" id="01">29.90€</div> 
 
    <div class="hover borl" id="02">59.90€</div> 
 
    <div class="hover borl" id="03">409.90€</div> 
 
    <div class="hover borl" id="04">2009.90€</div> 
 
    </div> 
 
    <div class="intra caisse"> 
 
    <div class="tit bort">Pack Intranet+Caisse</div> 
 
    <div class="hover bort" id="05">29.90€</div> 
 
    <div class="hover bortl" id="06">29.90€</div> 
 
    <div class="hover bortl" id="07">29.90€</div> 
 
    <div class="hover bortl" id="08">29.90€</div> 
 
    </div> 
 
    <div class="intra web"> 
 
    <div class="tit bort">Pack Intranet+Web</div> 
 
    <div class="hover bort" id="09">29.90€</div> 
 
    <div class="hover bortl" id="10">29.90€</div> 
 
    <div class="hover bortl" id="11">29.90€</div> 
 
    <div class="hover bortl" id="12">29.90€</div> 
 
    </div> 
 

 
    <div class="intra caisse web"> 
 
    <div class="tit bort">Pack Intranet+Caisse+Web</div> 
 
    <div class="hover bort" id="13">29.90€</div> 
 
    <div class="hover bortl" id="14">29.90€</div> 
 
    <div class="hover bortl" id="15">29.90€</div> 
 
    <div class="hover bortl" id="16">29.90€</div> 
 
    </div> 
 
</div>

来源

2016-08-12 12:10:07

谢谢你，这就是我正在寻找的。我有一个后面的问题，它有点无关我希望回答这不需要一个全新的线程：我正在通过类来做内部边框，因为你可以看到seing，因为我无法让边框崩溃工作。有没有更简单的方法，或者可以实现边界崩溃？ –

没有...在表上或（我认为）CSS表上的作品border-collapse –

如果你可以使用CSS flexbox它可以很容易达到你想要这样的东西：

html, body { 
 
    margin: 0; 
 
    padding:0; 
 
} 
 

 
.container { 
 
    width: 100%; 
 
    display: flex; 
 
} 
 

 
.column { 
 
    background-color: #f9f9f9; 
 
    padding: 10px 15px; 
 
    border: 1px solid grey; 
 
    flex: 1; 
 
} 
 

 
.column.left { 
 
    background-color: grey; 
 
    color: white; 
 
    width: 90px; 
 
    max-width: 90px; 
 
    flex: 0 0 90px; 
 
}

<div class="container"> 
 
    <div class="column left"> 
 
    Fixed 90px 
 
    </div> 
 
    <div class="column"> 
 
    Column 
 
    </div> 
 
    <div class="column"> 
 
    This is the longest column 
 
    </div> 
 
    <div class="column"> 
 
    Longer Column 
 
    </div> 
 
</div>

你的代码是如此混乱，我把从头开始，但你一个新的应该能够轻松满足您的需求。在上面的代码片段中，第一列是固定宽度，其余列的宽度是相等的。

Flexbox的浏览器支持：http://caniuse.com/#search=flexbox

这里也是玩弄小提琴：https://jsfiddle.net/thepio/22mouw62/

来源

2016-08-12 12:09:33 thepio

DIV使用显示表，显示表单元格，但一列固定宽度的

回答

相关问题