html - 在不同的行中显示具有不同单元格宽度的表格

标签 html css

如何调整不同行中“display:table”的错位？我在没有 jquery 函数的情况下为每一行的相同高度执行此操作。 计算宽度和负边距用于边框间距和边框折叠

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>

最佳答案

这是一个使用 <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>

关于html - 在不同的行中显示具有不同单元格宽度的表格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38301844/

上一篇：javascript - 使用现有 SVG 路径遮盖图像

下一篇：jquery - 点击播放匹配元素的视频点击

相关文章：

java - 使用 jsoup 检索 html 内联样式属性值

css - GWT:更新 CSS 失败

javascript - 如何使 HTML 范围输入仅在滑动时起作用？

page-layout - 你如何将基于百分比的边距放入 CSS 网格？

php - 下载包含图像和样式表的网页并(可选)通过电子邮件发送

php - 刷新后维护动态下拉列表中的选择值

html - 将 Bootstrap Navbar 的高度更改为 85px 并保持垂直对齐

html - 三行布局内容 100% 高度带粘性页脚

jquery - 如何获得正确/预期的不透明度以应用于在 IE8 中使用 $().fadeIn() 显示的元素？

javascript - 如何在提交表单之前立即对 radio 输入设置 CustomValidity

©2024 IT工具网  联系我们