CSS表在Google Chrome中工作正常，但在Mozilla ubuntu中工作不正常

Question

我如何使桌子适合屏幕？

css

.insert-to-items {
  border-collapse: collapse;
  font-size: 0.9em;
  border-radius: 40px 40px 0 0;
  overflow: hidden;
  box-shadow: 0 0 20px rgb(230, 0, 0);
  position: absolute;
  width: 300px;
  bottom: 20px;
  right: 100%;
  left: 25%;
  margin-left: -330px;
}

.insert-to-items thead tr {
  background-color: #e60000;
  color: #ffffff;
  text-align: left;
  font-weight: bold;
}

.insert-to-items th,
.insert-to-items td {
  padding: 12px 9px;
  text-align: center;
}

html

<table class="insert-to-items">
  <thead>
    <tr>
<th>Item Name</th>
      <th>Prom Name</th>
      <th>Prom Code</th>
      <th>Base Code</th>
      <th>Description</th>
      <th>Price</th>
      <th>ΦΠΑ %</th>
      <th>Οικογενεια</th>
      <th>M.M</th>
    </tr>
     </tr>
     <tbody>
    <tr>
        <td><input size="13" <%= form.text_field :itemName %></td>
        <td><input id="myInput" size="13" <%= form.text_field :prom %></td> 
        <td><input size="13" <%= form.text_field :promCode %></td>
        <td><input size="13" <%= form.text_field :baseCode %></td>
        <td><input size="13" <%= form.text_field :desc %></td>
        <td><input type="number" <%= form.number_field :price, step: '0.001' %></td>
        <td><input type="number" <%= form.number_field :fpa %></td>
        <td><input size="13" <%= form.text_field :familys %></td>
        <td><input size="13" <%= form.text_field :monadaMe %></td>
      </tr>
  </tbody>
  </thead>
</table>

我注意到的错误是，在Windows 10上，谷歌浏览器工作正常，但是由于ubuntu 19.10 mozila在同一台笔记本电脑上存在以下问题因此，必须有一种在CSS中自动调整大小的方法？我对html和CSS不太了解，所以也许这很简单

UPDATE依然没有火狐vs铬

Answer 1

[您应尝试通过添加以下视口元素以使其具有响应性

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">```
</head>

CSS表在Google Chrome中工作正常，但在Mozilla ubuntu中工作不正常

问题描述投票：0回答：1

1个回答

最新问题

CSS表在Google Chrome中工作正常，但在Mozilla ubuntu中工作不正常

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1