在不同的行

时间：2016-07-11 07:57:35

标签： html css

我如何用不同的行中的“display：table”调整这个错位？我在没有jquery函数的情况下在每行中执行相同的高度。 calc宽度和负边距用于边框间距和边框折叠

misalignment

代码：

* {
  font-family: "Trebuchet MS", Arial, Sans-Serif;
  outline: none;
}
html,
body {
  margin: 0;
  padding: 0;
  background-color: rgba(221, 221, 221, 1);
}
/* LIMITAZIONE: Per evitare di fare comparire lo scorrimento orizzontale sono necessari margini dx/sx la cui somma è uguale/maggiore dei pixel aggiunti al width della tabella */

.tableswrapper {
  margin-top: 0;
  margin-right: 1%;
  margin-bottom: 0;
  margin-left: 1%;
  padding: 0;
  background-color: rgba(255, 0, 0, 1);
}
.tableswrapper div.table {
  width: calc(100% + 40px);
  display: table;
  border-collapse: separate;
  border-spacing: 20px 0;
  margin-bottom: 20px;
  margin-left: -20px;
  padding: 0;
}
.tableswrapper div.table:last-child {
  margin-bottom: 0;
}
.tableswrapper div.table div.row {
  display: table-row;
}
.tableswrapper div.table div.row div[class^='cellwidth'] {
  display: table-cell;
  empty-cells: hide;
  padding: 0;
  vertical-align: top;
  background-color: rgba(255, 255, 255, 1);
}
.tableswrapper div.table div.row div[class^='cellwidth']:first-child {} .tableswrapper div.table div.row div[class^='cellwidth']:last-child {} .tableswrapper div.table div.row div.cellwidth1 {
  width: 1%;
}
.tableswrapper div.table div.row div.cellwidth2 {
  width: 2%;
}
.tableswrapper div.table div.row div.cellwidth3 {
  width: 3%;
}
.tableswrapper div.table div.row div.cellwidth4 {
  width: 4%;
}
.tableswrapper div.table div.row div.cellwidth5 {
  width: 5%;
}
.tableswrapper div.table div.row div.cellwidth6 {
  width: 6%;
}
.tableswrapper div.table div.row div.cellwidth7 {
  width: 7%;
}
.tableswrapper div.table div.row div.cellwidth8 {
  width: 8%;
}
.tableswrapper div.table div.row div.cellwidth9 {
  width: 9%;
}
.tableswrapper div.table div.row div.cellwidth10 {
  width: 10%;
}
.tableswrapper div.table div.row div.cellwidth15 {
  width: 15%;
}
.tableswrapper div.table div.row div.cellwidth20 {
  width: 20%;
}
.tableswrapper div.table div.row div.cellwidth25 {
  width: 25%;
}
.tableswrapper div.table div.row div.cellwidth30 {
  width: 30%;
}
.tableswrapper div.table div.row div.cellwidth33 {
  width: 33.3333333333%;
}
.tableswrapper div.table div.row div.cellwidth35 {
  width: 35%;
}
.tableswrapper div.table div.row div.cellwidth40 {
  width: 40%;
}
.tableswrapper div.table div.row div.cellwidth45 {
  width: 45%;
}
.tableswrapper div.table div.row div.cellwidth50 {
  width: 50%;
}
.tableswrapper div.table div.row div.cellwidth55 {
  width: 55%;
}
.tableswrapper div.table div.row div.cellwidth60 {
  width: 60%;
}
.tableswrapper div.table div.row div.cellwidth65 {
  width: 65%;
}
.tableswrapper div.table div.row div.cellwidth66 {
  width: 66.6666666666%;
}
.tableswrapper div.table div.row div.cellwidth70 {
  width: 70%;
}
.tableswrapper div.table div.row div.cellwidth75 {
  width: 75%;
}
.tableswrapper div.table div.row div.cellwidth80 {
  width: 80%;
}
.tableswrapper div.table div.row div.cellwidth85 {
  width: 85%;
}
.tableswrapper div.table div.row div.cellwidth90 {
  width: 90%;
}
.tableswrapper div.table div.row div.cellwidth95 {
  width: 95%;
}
.tableswrapper div.table div.row div.cellwidth100 {
  width: 100%;
}
/* TRICK: abilitare se si desiderano larghezze di colonna uguali sulla riga*/

/*
		.tableswrapper div.table {table-layout:fixed;}
		.tableswrapper div.table div.row div[class^='cellwidth'] {min-width:1%;width:1%;max-width:1%;}
		*/

/* LIMITAZIONE: Le colonne all'interno di ogni riga che hanno un'immagine di testata devono avere la stessa larghezza */

.tableswrapper div.table div.row div[class^='cellwidth'] div.headerimage {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  padding-bottom: 50%;
}
.tableswrapper div.table div.row div[class^='cellwidth'] div.headerimage img {
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.tableswrapper div.table div.row div[class^='cellwidth'] div.cellcontents {
  margin: 0;
  padding: 20px;
}
/*.tableswrapper div.table div.row div[class^='cellwidth'] div.headerimage + div.cellcontents {padding-top:20px;}*/

.tableswrapper div.table div.row div[class^='cellwidth'] div.cellcontents h1.celltitle {
  margin: 0;
  padding: 0;
  color: red;
  font-size: 150%;
}
<!DOCTYPE html>
<html>

<head></head>

<body>

  <div class="tableswrapper">

    <div class="table">
      <div class="row">
        <div class="cellwidth100">
          <div class="cellcontents">
            <h1 class="celltitle">Cell title 100%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
      </div>
    </div>

    <div class="table">
      <div class="row">
        <div class="cellwidth30">
          <div class="cellcontents">
            <h1 class="celltitle">Cell title 30%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
        <div class="cellwidth70">
          <div class="cellcontents">
            <h1 class="celltitle">Cell title 70%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
      </div>
    </div>

    <div class="table">
      <div class="row">
        <div class="cellwidth30">
          <div class="cellcontents">
            <h1 class="celltitle">Cell title 30%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
        <div class="cellwidth40">
          <div class="cellcontents">
            <h1 class="celltitle">Cell title 40%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
        <div class="cellwidth30">
          <div class="cellcontents">
            <h1 class="celltitle">Cell title 30%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
      </div>
    </div>

    <div class="table">
      <div class="row">
        <div class="cellwidth100">
          <div class="cellcontents">
            <h1 class="celltitle">Cell title 100%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
      </div>
    </div>

    <div class="table">
      <div class="row">
        <div class="cellwidth25">
          <div class="cellcontents">
            <h1 class="celltitle">Cell title 25%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
        <div class="cellwidth50">
          <div class="cellcontents">
            <h1 class="celltitle">Cell title 25%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
        <div class="cellwidth25">
          <div class="cellcontents">
            <h1 class="celltitle">Cell title 25%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
      </div>
    </div>

    <div class="table">
      <div class="row">
        <div class="cellwidth25">
          <div class="cellcontents">
            <h1 class="celltitle">Cell title 25%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
        <div class="cellwidth50">
          <div class="cellcontents">
            <h1 class="celltitle">Cell title 50%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
        <div class="cellwidth25">
          <div class="cellcontents">
            <h1 class="celltitle">Cell title 25%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
      </div>
    </div>

    <div class="table">
      <div class="row">
        <div class="cellwidth25">
          <div class="cellcontents">
            <h1 class="celltitle">Cell title 25%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
        <div class="cellwidth25">
          <div class="cellcontents">
            <h1 class="celltitle">Cell title 25%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
        <div class="cellwidth25">
          <div class="cellcontents">
            <h1 class="celltitle">Cell title 25%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
        <div class="cellwidth25">
          <div class="cellcontents">
            <h1 class="celltitle">Cell title 25%</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
      </div>
    </div>

  </div>

</body>

</html>

1 个答案:

答案 0 :(得分：1)

以下是使用<table>和colspan属性的解决方案。

它的工作原因是：

  • 表格的宽度明确声明为100%;和
  • 底部有一行（用于比例），包含100个单元格

表中的每个其他单元格都可以使用colspan属性声明其正确的相对宽度。

table {
width: 100%;
border-collapse: collapse;
font-family: trebuchet ms, arial, sans-serif;
}

td {
border:18px solid rgb(255,0,0);
padding: 0 12px;
}

tr.scale td {
border: none;
padding: 0;
}

h2 {
color: rgb(255,0,0);
}
<table>
<tr>
<td colspan="100">
<h2>Cell title 100%</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</td>
</tr>

<tr>
<td colspan="30">
<h2>Cell title 30%</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</td>

<td colspan="70">
<h2>Cell title 70%</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</td>  
</tr>

<tr>
<td colspan="30">
<h2>Cell title 30%</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</td>

<td colspan="40">
<h2>Cell title 40%</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</td> 

<td colspan="30">
<h2>Cell title 30%</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</td> 
</tr>

<tr>
<td colspan="100">
<h2>Cell title 100%</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</td>  
</tr>

<tr>
<td colspan="25">
<h2>Cell title 25%</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</td>

<td colspan="25">
<h2>Cell title 25%</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</td> 

<td colspan="25">
<h2>Cell title 25%</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</td> 

<td colspan="25">
<h2>Cell title 25%</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</td> 
</tr>

<tr>
<td colspan="25">
<h2>Cell title 25%</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</td>

<td colspan="50">
<h2>Cell title 50%</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</td> 

<td colspan="25">
<h2>Cell title 25%</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</td> 
</tr>

<tr>
<td colspan="25">
<h2>Cell title 25%</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</td>

<td colspan="25">
<h2>Cell title 25%</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</td> 

<td colspan="25">
<h2>Cell title 25%</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</td> 

<td colspan="25">
<h2>Cell title 25%</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</td> 
</tr>

<tr class="scale">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>

相关问题
最新问题