HTML表格内datalist样式异常：输入框未占满列、CSS背景图消失求助

问题1：输入框无法铺满表格列宽度 #

默认input元素有内置固定宽度，要让它撑满父级td的宽度，给对应input添加宽度属性即可，同时增加box-sizing: border-box避免内边距、边框撑破容器：

#type {
  width: 100%;
  box-sizing: border-box;
}

如果需要统一表格内所有输入框样式，也可以给td下的input统一设置规则：

td input {
  width: 100%;
  box-sizing: border-box;
}

问题2：页面背景图片消失 #

当前你写的background属性本身语法正确，绝大多数场景下不显示的原因是body没有设置最小高度：默认body高度由页面内容撑开，如果内容高度小于视口高度，或者没有给html、body设置占满视口的高度，背景图就会无法正常显示。修改你的body样式如下即可：

html, body {
  height: 100%;
  margin: 0;
}
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;
  min-height: 100vh;
}

如果修改后还是无法显示，可以检查是否有其他更高优先级的CSS规则覆盖了body的background属性。

完整参考代码 #

<!DOCTYPE html>
<html>
<head>
<style>
html, body {
  height: 100%;
  margin: 0;
}
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;
  min-height: 100vh;
}
#type {
  width: 100%;
  box-sizing: border-box;
}
table {
  width: 100%;
}
</style>
</head>
<body>
<form>
  <table>
    <tr>
      <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>
  </table>
</form>
</body>
</html>

内容的提问来源于stack exchange，提问作者Subhadeep