html - 如何给一个中间有一个静态单词的单元格提供多个值

Question

我正在创建一个可编辑的 html 表，我想知道如何为中间有一个静态单词的单个单元格提供多个值，例如：

我已经有了这个：

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<table>
  <tr>
    <th>Days</th>
    <th>Work Schedule</th>
    <th>Rest and Meal Interval</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td contenteditable='true'>This is editable</td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td>Tuesday</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td>Wednesday</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td>Thursday</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td>Friday</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td>Saturday</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
    <tr>
    <td>Sunday</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
</table>

我想要这个：

所以这个词às总是在这些单元格的中间，我需要在它之前和之后留一个空格来写一些值。

标签： htmlcss

Answer 1

如果您想在同一列中包含某些内容，则需要将 更改td为包含两个输入和之间的文本，如下所示：

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

input {
  border: 1px solid #dddddd;
  text-align: left;
  box-sizing: border-box;
  width: 40%;
  
  height: 100%
}

span {
  width: 10%;
  margin-left: 5%;
  margin-right: 5%;
}

<table>
  <tr>
    <th>Days</th>
    <th>Work Schedule</th>
    <th>Rest and Meal Interval</th>
  </tr>
  <tr>
    <td>Monday</td>
    <td><input type="text"/><span>às</span><input type="text"/></td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td>Tuesday</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td>Wednesday</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td>Thursday</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td>Friday</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td>Saturday</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
  <tr>
    <td>Sunday</td>
    <td contenteditable='true'></td>
    <td contenteditable='true'></td>
  </tr>
</table>

显然，需要一些额外的 CSS 才能使它看起来更漂亮。