Question

这是我目前表格的一部分：

这是一个表格，显示已完成的任务，当时任务和部门工作的持续时间（这意味着一个条目包含 Verrichtete Arbeit ， Zeit 和 Abteilung 并且它们已连接）。这些条目是工作日行（Mo.Di.Mi）。我想现在为每个工作日的行添加新条目。当存在太多文本的td时会出现问题，导致一个条目使用2行（例如，星期一在 Verrichtete Arbeit 中输入，在星期一输入 Abteilung ）。使用2行的事实不是问题。但是当有一个新条目时， Zeit 的新值将直接放在最后一个值之下，它看起来像这样：

这是一张用gimp编辑的图片，它将显示它应该是什么样子：

这是我用于此目的的HTML设置：

<table id="report_table">
  <tr id="tr_table_header">
    <th id="th_week_day"></th>
    <th id="th_completed_task">Verrichtete Arbeit</th>
    <th id="th_hours_worked">Zeit</th>
    <th id="th_working_department">Abteilung</th>
  </tr>
  <tr class="tableRowDay">
    <td class="weekDay">Mo.</td>
    <td class="completedTask">fooo foo foo ofoo foo ofoo ofoofooofff Foo foo foo foo fooo foo foooooooooooo fooooo fooo foo fooo foooo fooo</td>
    <td class="hoursWorked">2</td>
    <td class="workingDepartment">Forschung und Entwicklung</td>
  </tr>
  <tr>
    <td class="weekDay">Di.</td>
    <td class="completedTask">Bar</td>
    <td class="hoursWorked">4</td>
    <td class="workingDepartment">Technik</td>
  </tr>
  <tr>
    <td class="weekDay">Mi.</td>
    <td class="completedTask">Baz</td>
    <td class="hoursWorked">5</td>
    <td class="workingDepartment">Forschung und Entwicklung</td>
  </tr>
  <tr>
    <td class="weekDay">Do.</td>
    <td class="completedTask">Lorem</td>
    <td class="hoursWorked">3</td>
    <td class="workingDepartment">Forschung und Entwicklung</td>
  </tr>
  <tr>
    <td class="weekDay">Fr.</td>
    <td class="completedTask">Ipsum</td>
    <td class="hoursWorked">5</td>
    <td class="workingDepartment">Technik</td>
  </tr>
  <tr>
    <td class="weekDay">Sa.</td>
    <td class="completedTask"></td>
    <td class="hoursWorked">5</td>
    <td class="workingDepartment">Technik</td>
  </tr>
</table>

这是我目前的CSS：

#a4 {
    background-color: white;
    width: 210mm;
    height: 297mm;
    margin: 0 auto;
}

table {
    border-collapse: collapse;
    overflow: hidden;
}

table#report_table {
    table-layout: fixed;
    width: 180mm;
    margin: 0 auto;
}

table, th, td {
    border: 0.6mm solid black;
}

#tr_table_header {
    height: 5mm;
    max-height: 5mm;
}

#th_week_day {
    width: 5mm;
    max-width: 5mm;
}

#th_hours_worked {
    width: 10mm;
    max-width: 10mm;
}

#th_working_department {
    width: 35mm;
    max-width: 35mm;
}

.weekDay {
    width: 10mm;
    max-width: 10mm;
    height: 25mm;
    max-height: 25mm;
    text-align: center;
    /* Safari */
    -webkit-transform: rotate(-90deg);
    /* Firefox */
    -moz-transform: rotate(-90deg);
    /* IE */
    -ms-transform: rotate(-90deg);
    /* Opera */
    -o-transform: rotate(-90deg);
    /* Internet Explorer */
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.completedTask {
    height: 25mm;
    max-height: 25mm;
    text-align: justify;
    vertical-align:top;
}

.hoursWorked {
    width: 10mm;
    max-width: 10mm;
    height: 25mm;
    max-height: 25mm;
    text-align: center;
    vertical-align: top;
}

.workingDepartment {
    width: 15mm;
    max-width: 15mm;
    height: 25mm;
    max-height: 25mm;
    text-align: center;
    vertical-align: top;
}

固定值（mm，cm）是故意的，因为网站将在以后打印！我想在工作日的行内使用一张桌子，但是把这整个设计搞砸了，这很不幸。我更喜欢不使用javascript，但如果可能的话只使用css和html。感谢每一个建议或帮助！

Answer 1

你可以这样做，一个表中的结构样本，没有脚本。

注意，我刚刚添加了一个工作日，虽然它显示了这个概念，但您必须添加自己的边框等。

table {
    table-layout: fixed;
    border-collapse: collapse;
    overflow: hidden;
  width: 100%;
}

table, th, td {
    border: 0.6mm solid black;
}

#th_week_day,
.weekDay {
  width: 40px;
}

.tr-inner th,
.tr-inner td {
  width: 20%;
  vertical-align: top;
}
.tr-inner th:first-child,
.tr-inner td:first-child {
  width: 60%;
}

<table id="report_table">
  <tr id="tr_table_header">
    <th id="th_week_day"></th>
    <th>
      <table>
        <tr class="tr-inner">
          <th id="th_completed_task">Verrichtete Arbeit</th>
          <th id="th_hours_worked">Zeit</th>
          <th id="th_working_department">Abteilung</th>
        </tr>
      </table>
    </th>
  </tr>
  <tr class="tableRowDay">
    <td class="weekDay">Mo.</td>
    <td>
      <table>
        <tr class="tr-inner">
          <td class="completedTask">fooo</td>
          <td class="hoursWorked">2</td>
          <td class="workingDepartment">Forschung</td>
        </tr>
        <tr class="tr-inner">
          <td class="completedTask">fooo foo foo ofoo foo ofoo ofoofooofff Foo foo foo foo fooo foo foooooooooooo fooooo fooo foo fooo foooo fooo</td>
          <td class="hoursWorked">4</td>
          <td class="workingDepartment">Forschung und Entwicklung</td>
        </tr>
        <tr class="tr-inner">
          <td class="completedTask">fooo foo foo ofoo foo ofoo </td>
          <td class="hoursWorked">2</td>
          <td class="workingDepartment">Entwicklung</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

表行中的表行

1 个答案: