时间戳

首页 > 解决方案 > 我想将表格从水平组更改为垂直组

html - 我想将表格从水平组更改为垂直组

问题描述

我正在创建这样的表格，但是当我编写 HTML 时，如何将其写入垂直组（一周中的几天）而不是水平组（数字）？

如果你能告诉我更多关于它的信息，我将不胜感激。

a {
  display: block;
  width: 100%;
  height: 100%;
}

table {
  border-collapse: collapse;
}

.table td,
th {
  border: solid 1px;
  padding: 0.5em;
  background: #ffffff;
  width: 80px;
}

.table.td.table {
  border-color: #ffffff;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">

</head>

<body>
  <table class="table">
    <tr>
      <td></td>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
    </tr>

    <tr>
      <th>1</th>
      <td>
        <p>Content</p>
      </td>
      <td>
        <p>Content</p>
      </td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>2</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>3</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>4</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>5</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>6</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
</body>

</html>

理想如下所示。我想写一周中的每一天而不是数字。

在此处输入图像描述

标签： htmlcss

解决方案

AFAIK 没有内置的方法可以在 HTML 中执行此操作（按列而不是行顺序写入）。

然而，你可以做的是把你的时间表写成一行——所以周一是一行，周二是一行等等——这样你就可以按照你想要的方式对事情进行分组。

然后，您可以在运行时使用 Javascript 转置表格。

此代码段采用 @johnvkumpf 在如何反转（转置）HTML 表格的行和列中给出的日期为 22Feb（2021 年）的代码？加上您的原始表，但重写为将日期作为行。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
a {
  display: block;
  width: 100%;
  height: 100%;
}

table {
  border-collapse: collapse;
}

.table td,
th {
  border: solid 1px;
  padding: 0.5em;
  background: #ffffff;
  width: 80px;
}

.table.td.table {
  border-color: #ffffff;
}
</style>
</head>

<body>
<p><a href="#" id="transposButton">Click me to transpose the table</a></p>
  <table class="table">
    <tr>
      <td></td>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
    </tr>

    <tr>
      <th>Monday</th>
      <td>
        <p>Content</p>
      </td>
      <td>
        <p>Content</p>
      </td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>Tuesday</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>Wednesday</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>Thursday</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>Friday</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th>Saturday</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
  <script>
  $("a#transposButton").click(function(){
    $("table").each(function() {
        var $this = $(this);
        var newrows = [];
        $this.find("tr").each(function(rowToColIndex){
            $(this).find("td, th").each(function(colToRowIndex){
                if(newrows[colToRowIndex] === undefined) { newrows[colToRowIndex] = $("<tr></tr>"); }
                while(newrows[colToRowIndex].find("td, th").length < rowToColIndex){
                    newrows[colToRowIndex].append($("<td></td>"));
                }
                newrows[colToRowIndex].append($(this));
            });
        });
        $this.find("tr").remove();
        $.each(newrows, function(){
            $this.append(this);
        });
    });
    
    return false;
});
</script>

https://stackoverflow.com/questions/66986623/i-want-to-change-the-table-from-a-horizontal-group-to-a-vertical-group
http://jsfiddle.net/xsp4eqwz/2/
</body>

</html>

推荐阅读