CSS 在 table 内的 HTML 数据列表中消失了

Question

我在网络开发方面还很陌生。在一个表单中，我创建了这个 table。在一个 table 数据中，我需要使用带有占位符“Establishment:Independent/Chain*”

的数据列表

但是

它没有涵盖整个 table 列
背景图片也消失了

有人可以帮我解决这个问题吗？

我写过这段代码

body {
  font-weight: bold;
  margin-left: auto;
  margin-right: auto;
  background-image: url("https://via.placeholder.com/800");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

<td>
  <input list="establishmentType" id="type" placeholder="Establishment : Independant/Chain*" required>
  <datalist id="establishmentType">
                <option value="Independant"></option>
                <option value="Chain"></option>
                </datalist>
</td>

Answer 1

试试这个：

* {box-sizing: border-box;}
    body {
      font-weight: bold;
      margin-left: auto;
      margin-right: auto;
      background-image: url("https://via.placeholder.com/800");
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }
    
table {
      width: 100%;
      
}
    
td {
        width: 50%;
}

td input {
    width: 100%;
    background: transparent;
}

<table>
<tbody>
<tr>
<td>test</td>

<td>
      <input list="establishmentType" id="type" placeholder="Establishment : Independant/Chain*" required>
      <datalist id="establishmentType">
                    <option value="Independant"></option>
                    <option value="Chain"></option>
                    </datalist>
    </td>
    </tr>
    </tbody>
    </table>

但老实说，我不会将表格用于表格....那真的很老了，不再是一个好习惯。我会尝试使用 flexbox。

像这样：

.row { 
    display: flex
}
.column {width: 50%;}

<div class="row">
  <div class="column">
      left
  </div>
  <div class="column">
      right
  </div>
</div>

对于你的行和列

CSS 在 table 内的 HTML 数据列表中消失了

CSS Vanished in HTML datalist inside a table

html

css

html-table

html-datalist