HTML数据中的多行跨度

时间：2017-05-09 05:17:38

标签： html

我正在尝试创建一个类似于附加截图中显示的表格。该表的数据来自python脚本，但我需要在HTML方面有一些关于如何创建可以跨越多行的表的输入

由于我对HTML知之甚少，我尝试使用以下代码创建表格，但它看起来并不像预期的那样工作。如果有人可以对这里可能出错的事情进行一些说明，那将非常有帮助

＆＃13;
＆＃13; 
table,
td,
th {
  font-family: Verdana;
  border: 2px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  background-color: green;
  color: white;
}

th,
tr {
  height: 50px;
}

td {
  font-family: Verdana;
  font-size: 15pt;
  text-align: center;
}

body {
  background-color: lightgreen
}
＆＃13; 
<table style="width:100%">
  <table>
    <tr>
      <th>Project</th>
      <th>Environment</th>
      <th>Data1</th>
      <th>Multiple Data</th>
    </tr>
    <tr>
      <td rowspan="4">project1</td>
      <td rowspan="4">prod</td>
      <td rowspan="4">project1data</td>
      <td rowspan="4">project1 multi row data1</td>
      <td rowspan="4">project1 multi row data2</td>
    </tr>
    <tr>
      <td rowspan="4">project2</td>
      <td rowspan="4">stage</td>
      <td rowspan="4">project2data</td>
      <td rowspan="4">project2 multi row data1</td>
      <td rowspan="4">project2 multi row data2</td>
    </tr>
    <tr>
      <td rowspan="4">project3</td>
      <td rowspan="4">test</td>
      <td rowspan="4">project3data</td>
      <td rowspan="4">project3 multi row data1</td>
      <td rowspan="4">project3 multi row data2</td>
    </tr>
    <tr>
      <td rowspan="4">project4</td>
      <td rowspan="4">dev</td>
      <td rowspan="4">project4data</td>
      <td rowspan="4">project4 multi row data1</td>
      <td rowspan="4">project4 multi row data2</td>
    </tr>
    <tr>
      <td rowspan="4">project5</td>
      <td rowspan="4">qa</td>
      <td rowspan="4">project5data</td>
      <td rowspan="4">project5 multi row data1</td>
      <td rowspan="4">project5 multi row data2</td>
    </tr>

  </table>
＆＃13;
＆＃13;
＆＃13;

enter image description here

6 个答案:

答案 0 :(得分：4)

错误在于，即使在最后rowspan="4"，你也有td。您需要避免使用rowspan：

＆＃13;
＆＃13; 
<table>
  <tr>
    <th>Project</th>
    <th>Environment</th>
    <th>Data1</th>
    <th>Multiple Data</th>
  </tr>
  <tr>
    <td rowspan="3">project1</td>
    <td rowspan="3">prod</td>
    <td rowspan="3">project1data</td>
    <td>project1 multi row data1</td>
  </tr>
  <tr>
    <td>project1 multi row data2</td>
  </tr>
  <tr>
    <td>project1 multi row data3</td>
  </tr>
  <tr>
    <td rowspan="3">project2</td>
    <td rowspan="3">stage</td>
    <td rowspan="3">project2data</td>
    <td>project2 multi row data1</td>
  </tr>
  <tr>
    <td>project2 multi row data2</td>
  </tr>
  <tr>
    <td>project2 multi row data3</td>
  </tr>
  <tr>
    <td rowspan="3">project3</td>
    <td rowspan="3">test</td>
    <td rowspan="3">project3data</td>
    <td>project3 multi row data1</td>
  </tr>
  <tr>
    <td>project3 multi row data2</td>
  </tr>
  <tr>
    <td>project3 multi row data3</td>
  </tr>
  <tr>
    <td rowspan="3">project4</td>
    <td rowspan="3">dev</td>
    <td rowspan="3">project4data</td>
    <td>project4 multi row data1</td>
  </tr>
  <tr>
    <td>project4 multi row data2</td>
  </tr>
  <tr>
    <td>project4 multi row data3</td>
  </tr>
  <tr>
    <td rowspan="3">project5</td>
    <td rowspan="3">qa</td>
    <td rowspan="3">project5data</td>
    <td>project5 multi row data1</td>
  </tr>
  <tr>
    <td>project5 multi row data2</td>
  </tr>
  <tr>
    <td>project5 multi row data3</td>
  </tr>

</table>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

请检查：

基本上你可以在td中使用简单的<div>来完成第3个表的列。

https://jsfiddle.net/ryb0w54a/

＆＃13;
＆＃13; 
table { border:1px solid #000;border-collapse:collapse;}
th {border:1px solid #000;}
td { border:1px solid #000;}
div { border-bottom : 1px solid #000}
div.last { border-bottom : 0;}
＆＃13; 
<table>
<th>Project</th>
<th>Environment</th>
<th>Data1</th>
<th>Multiple Data</th>
<tr>
	<td>Project 1</td>
	<td>Env 1</td>
	<td>Project 1 Data</td>
	<td>
		<div>project1 multi row data1</div>
		<div>project1 multi row data2</div>
		<div class="last">project1 multi row data3</div>
	</td>
</tr>
<tr>
	<td>Project 1</td>
	<td>Env 1</td>
	<td>Project 1 Data</td>
	<td>
		<div>project1 multi row data1</div>
		<div>project1 multi row data2</div>
		<div class="last">project1 multi row data3</div>
	</td>
</tr>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

删除多个数据列的sudo ln -s /home/test/.nvm/v4.3.1/bin/node /usr/bin/ ，并在相对号码后将其添加到另一个rowspan=4 <tr>。空div。

答案 3 :(得分：1)

我认为这可以帮助您满足您的需求

table,
td,
th {
  font-family: Verdana;
  border: 2px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  background-color: green;
  color: white;
}

th,
tr {
  height: 50px;
}

td {
  font-family: Verdana;
  font-size: 15pt;
  text-align: center;
}

body {
  background-color: lightgreen
}
<table>
  <thead>
   <tr>
    <th>Project</th>
    <th>Environment</th>
    <th>Data</th>
    <th>Multiple Data</th>
   </tr>
  </thead>
  <tbody>
   <tr>
    <td>A1</td>
    <td>A2</td>
    <td>A3</td>
    <td>
      <table>
        <tbody>
          <tr>
            <td>B1</td>
          </tr>
          <tr>
            <td>B2</td>
          </tr>
        </tbody>
      </table>
    </td>
   </tr>
  </tbody>
</table>

答案 4 :(得分：-1)

您只需，而不使用rowspan ，只需在最后一个中添加另一个表，其中会有多行。

  

我们走了：

＆＃13;
＆＃13; 
table,
td,
th {
  font-family: Verdana;
  border: 2px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  background-color: green;
  color: white;
}

th,
tr {
  height: 50px;
}

td {
  font-family: Verdana;
  font-size: 15pt;
  text-align: center;
}

body {
  background-color: lightgreen
}

table tr td table {
  border: none;
}

table tr td table td {
  border-left: none;
  border-right: none;
}

table tr td table tr:first-child td {
  border-top: none;
}

table tr td table tr:last-child td {
  border-bottom: none;
}
＆＃13; 
<table>
  <tr>
    <th>Project</th>
    <th>Environment</th>
    <th>Data1</th>
    <th>Multiple Data</th>
  </tr>
  <tr>
    <td>project1</td>
    <td>prod</td>
    <td>project1data</td>

    <td>
      <table>
        <tr>
          <td>project1 multi row data2</td>
        </tr>
        <tr>
          <td>project1 multi row data2</td>
        </tr>
        <tr>
          <td>project1 multi row data2</td>
        </tr>
        <tr>
          <td>project1 multi row data2</td>
        </tr>
      </table>
    </td>
  </tr>

  <tr>
    <td>project2</td>
    <td>prod</td>
    <td>project1data</td>

    <td>
      <table>
        <tr>
          <td>project1 multi row data2</td>
        </tr>
        <tr>
          <td>project1 multi row data2</td>
        </tr>
        <tr>
          <td>project1 multi row data2</td>
        </tr>
        <tr>
          <td>project1 multi row data2</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>project3</td>
    <td>prod</td>
    <td>project1data</td>

    <td>
      <table>
        <tr>
          <td>project1 multi row data2</td>
        </tr>
        <tr>
          <td>project1 multi row data2</td>
        </tr>
        <tr>
          <td>project1 multi row data2</td>
        </tr>
        <tr>
          <td>project1 multi row data2</td>
        </tr>
      </table>
    </td>
  </tr>

</table>
＆＃13;
＆＃13;
＆＃13;

答案 5 :(得分：-1)

您的方法是正确的，但您实施它的方式有一个小错误。我认为此代码将为您提供解决问题的正确方法。代码非常基础，但可以帮助您了解它的工作原理。

＆＃13;
＆＃13; 
 <table>
        <thead>
            <tr>
                <th>Head 1</th>
                <th>Head 2</th>
                <th>Head 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="4">Data 1</td>
                <td rowspan="4">Data 2</td>
            </tr>
            <tr>
                <td>Data 2.1</td>
            </tr>
            <tr>
                <td>Data 2.1</td>
            </tr>
            <tr>
                <td>Data 2.1</td>
            </tr>
        </tbody>
    </table>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题