HTML表单行（tr），使用css将td重新排列成两行

Question

由于宽度限制，我正在尝试重新安排我的表格。 我打算在表格上使用Jquery函数来定位每个tr以提取与产品相关的所有参数，因此我不希望嵌套tr或tr的前三个参数和下一个中的前三个参数。

我怎样才能完成它？

    <table style="width: 300px">
	    <thead>
	        <tr>
			    <th rowspan="2">Product</th>
			    <th>Category</th>
			    <th>Sub Category</th>
			    <th>Quantity</th>
			    <th>Arrival Date</th>
			    <th>Manufactured Date</th>
			    <th>Expiry Date</th>
	        </tr>
	    </thead>
	    <tbody>
	        <tr id="productID_1">
	            <td rowspan="2">Skimmed Milk</td>
	            <td>Dairy</td>
			    <td>Milk</td>
			    <td>1 Ltr</td>
			    <td>1st Jan 2018</td>
			    <td>1st Jan 2018</td>
			    <td>7th Jan 2018</td>
	        </tr>
	        <tr id="productID_2">
	            <td rowspan="2">Cheddar</td>
	            <td>Dairy</td>
			    <td>Cheese</td>
			    <td>200 Grms</td>
			    <td>1st Jan 2018</td>
			    <td>1st Jan 2018</td>
			    <td>15th Jan 2018</td>
	        </tr>
	        <tr id="productID_3">
	            <td rowspan="2">Vanilla Ice Cream</td>
	            <td>Desserts</td>
			    <td>Ice Creams</td>
			    <td>100 Grms</td>
			    <td>15th Jan 2018</td>
			    <td>1st Jan 2018</td>
			    <td>31st March 2018</td>
	        </tr>
	    </tbody>
	</table>

我的JQuery代码

$("table#customerSalesTable tbody tr").each(function(index){ 
  // Code to capture each parameter 
} 

- 更新

正如@CodeIt所建议的那样，我不想将单行拆分成两行，并尝试使用类捕获我的值。这将需要完全重新编辑大量的JS代码。

Answer 1

使用JQuery

每个<tr>标记包含7个子节点。因此，使用单独的<tr> <th>Product</th> <th>Category</th> <th>Sub Category</th> <th>Quantity</th> <th>Arrival Date</th> <th>Manufactured Date</th> <th>Expiry Date</th> </tr> 标记包装子节点1-4和5-7将重新排列单元格。

示例：的

之前：

<tr>
    <th>Product</th>
    <tr>
        <th>Category</th>
        <th>Sub Category</th>
        <th>Quantity</th>
    </tr>
    <tr>
        <th>Arrival Date</th>
        <th>Manufactured Date</th>
        <th>Expiry Date</th>
    </tr>
</tr>

后：

// wrapping table headers
var e = $('th').slice(1, 4);
e.wrapAll("<tr/>");
var e = $('th').slice(-3);
e.wrapAll("<tr/>");

// wrapping table rows
var e = $('td').slice(1, 4);
e.wrapAll("<tr/>");
var e = $('td').slice(4, 7);
e.wrapAll("<tr/>");
var e = $('td').slice(8, 11);
e.wrapAll("<tr/>");
var e = $('td').slice(11, 14);
e.wrapAll("<tr/>");
var e = $('td').slice(15, 18);
e.wrapAll("<tr/>");
var e = $('td').slice(18, 21);
e.wrapAll("<tr/>");

// you can use #productID_* to capture parameters 
var e = $('#productID_2').find('td');
console.log(e);

td,
th {
  width: 100px !important; // specifies cell width
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="border-collapse: collapse;" border=1>
  <thead>
    <tr>
      <th>Product</th>
      <th>Category</th>
      <th>Sub Category</th>
      <th>Quantity</th>
      <th>Arrival Date</th>
      <th>Manufactured Date</th>
      <th>Expiry Date</th>
    </tr>
  </thead>
  <tbody>
    <tr id="productID_1">
      <td>Skimmed Milk</td>
      <td>Dairy</td>
      <td>Milk</td>
      <td>1 Ltr</td>
      <td>1st Jan 2018</td>
      <td>1st Jan 2018</td>
      <td>7th Jan 2018</td>
    </tr>
    <tr id="productID_2">
      <td>Cheddar</td>
      <td>Dairy</td>
      <td>Cheese</td>
      <td>200 Grms</td>
      <td>1st Jan 2018</td>
      <td>1st Jan 2018</td>
      <td>15th Jan 2018</td>
    </tr>
    <tr id="productID_3">
      <td>Vanilla Ice Cream</td>
      <td>Desserts</td>
      <td>Ice Creams</td>
      <td>100 Grms</td>
      <td>15th Jan 2018</td>
      <td>1st Jan 2018</td>
      <td>31st March 2018</td>
    </tr>
  </tbody>
</table>

{{1}}

Answer 2

您可以将每个<tr>显示为CSS grid而不是表格行。这将让您将每个单元格分别放置在网格中。不幸的是，由于每一行都是自己的网格，因此列宽不能取决于它们的内容。如果他们这样做了，列就不会排成一行。

#customerSalesTable th, #customerSalesTable td {
  border: 1px solid grey; /* visible borders */
  margin: 0 -1px -1px 0; /* "border-collapse" for non-tables */
  /* "Manufactured" is too long for the cell, so */
  overflow-wrap: break-word; /* or overflow: hidden if you want. */
}

#customerSalesTable tr {
  display: grid;
  grid-template:               /* Row height ▼ */
    "product category subcategory quantity" auto
    "product arrival  manufacture expiry  " auto
    /25%     25%      25%         25%; /* Column widths. They don't
    have to be even, but they need to be defined. */
}

/* Classes for each <td> work too, but
   if you don't want to change the HTML, */
#customerSalesTable th:nth-child(1),
#customerSalesTable td:nth-child(1) { grid-area: product; }
#customerSalesTable th:nth-child(2),
#customerSalesTable td:nth-child(2) { grid-area: category; }
#customerSalesTable th:nth-child(3),
#customerSalesTable td:nth-child(3) { grid-area: subcategory; }
#customerSalesTable th:nth-child(4),
#customerSalesTable td:nth-child(4) { grid-area: quantity; }
#customerSalesTable th:nth-child(5),
#customerSalesTable td:nth-child(5) { grid-area: arrival; }
#customerSalesTable th:nth-child(6),
#customerSalesTable td:nth-child(6) { grid-area: manufacture; }
#customerSalesTable th:nth-child(7),
#customerSalesTable td:nth-child(7) { grid-area: expiry; }

<table id="customerSalesTable" style="width: 300px">
  <thead>
    <tr>
      <th>Product</th> <!-- rowspan doesn't help now -->
      <th>Category</th>
      <th>Sub Category</th>
      <th>Quantity</th>
      <th>Arrival Date</th>
      <th>Manufactured Date</th>
      <th>Expiry Date</th>
    </tr>
  </thead>
  <tbody>
    <tr id="productID_1">
      <td>Skimmed Milk</td>
      <td>Dairy</td>
      <td>Milk</td>
      <td>1 Ltr</td>
      <td>1st Jan 2018</td>
      <td>1st Jan 2018</td>
      <td>7th Jan 2018</td>
    </tr>
    <tr id="productID_2">
      <td>Cheddar</td>
      <td>Dairy</td>
      <td>Cheese</td>
      <td>200 Grms</td>
      <td>1st Jan 2018</td>
      <td>1st Jan 2018</td>
      <td>15th Jan 2018</td>
    </tr>
    <tr id="productID_3">
      <td>Vanilla Ice Cream</td>
      <td>Desserts</td>
      <td>Ice Creams</td>
      <td>100 Grms</td>
      <td>15th Jan 2018</td>
      <td>1st Jan 2018</td>
      <td>31st March 2018</td>
    </tr>
  </tbody>
</table>