水平对齐 table 的 tr

Question

我有一个 table :

https://codepen.io/greg59650/pen/GROajNp

    <table role="table"><tbody>
      <tr>
       <td colspan="1">
      <form>
      <select name="pets" id="pet-select">
       <option value="">choose</option>
       <option value="dog">Dog</option>
       <option value="cat">Cat</option>
      </select>    
      </form>
       </td>    
        <td colspan="1">
       <form>
         <select name="pets" id="pet-select">
          <option value="">choose</option>
          <option value="dog">Dog</option>
          <option value="cat">Cat</option>
         </select>
          <span><button>Logout</button></span>
         </form>
          </td>    
        <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
           </select>    
        </form>
        </td>
        <td colspan="1">
       <form>
       <select name="pets" id="pet-select">
        <option value="">choose</option>
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
       </select>    
      </form>
       </td>
       <td colspan="1">
      <form>
      <select name="pets" id="pet-select">
       <option value="">choose</option>
       <option value="dog">Dog</option>
        <option value="cat">Cat</option>
       </select>    
       </form>
       </td>
       <td colspan="1">
       <form>
       <select name="pets" id="pet-select">
       <option value="">choose</option>
       <option value="dog">Dog</option>
       <option value="cat">Cat</option>
     </select>    
      </form>
     </td>
    <td colspan="1">
     <form>
      <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>    
  </form>
    </td>
       </tr></tbody></table>

如果我在我的 td 的内容中添加一个元素，我希望我所有的选择都在同一水平和下面的 button 上对齐。

像这样：

但目前我得到这个显示：

是否有一个简单的解决方案能够在同一级别对齐选择？

Answer 1

您可以将 vertical-align: top 添加到您的 td。

td {
    vertical-align: top;
}

table {border:1px solid black; }
td {
  vertical-align: top;
}

<table role="table"><tbody>
  <tr>
    <td colspan="1">
  <form>
  <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>    
  </form>
</td>    <td colspan="1">
  <form>
  <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>
    <span><button>Logout</button></span>
  </form>
</td>    <td colspan="1">
  <form>
  <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>    
  </form>
</td>
  <td colspan="1">
  <form>
  <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>    
  </form>
</td>
    <td colspan="1">
  <form>
  <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>    
  </form>
</td>
    <td colspan="1">
  <form>
  <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>    
  </form>
</td>
    <td colspan="1">
  <form>
  <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>    
  </form>
</td>
    <td colspan="1">
  <form>
  <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>    
  </form>
</td>
    <td colspan="1">
  <form>
  <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>    
  </form>
</td>
    <td colspan="1">
  <form>
  <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>    
  </form>
</td>
    <td colspan="1">
  <form>
  <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>    
  </form>
</td>
    <td colspan="1">
  <form>
  <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>    
  </form>
</td>
    <td colspan="1">
  <form>
  <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>    
  </form>
</td>
    <td colspan="1">
  <form>
  <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>    
  </form>
</td>
    <td colspan="1">
  <form>
  <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>    
  </form>
</td>
    <td colspan="1">
  <form>
  <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>    
  </form>
</td>
    <td colspan="1">
  <form>
  <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>    
  </form>
</td>
    <td colspan="1">
  <form>
  <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>    
  </form>
</td>
    <td colspan="1">
  <form>
  <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>    
  </form>
</td>
    <td colspan="1">
  <form>
  <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>    
  </form>
</td>
    <td colspan="1">
  <form>
  <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>    
  </form>
</td>
    <td colspan="1">
  <form>
  <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>    
  </form>
</td>
    <td colspan="1">
  <form>
  <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>    
  </form>
</td>
    <td colspan="1">
  <form>
  <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>    
  </form>
</td>
    <td colspan="1">
  <form>
  <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>    
  </form>
</td>
    <td colspan="1">
  <form>
  <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>    
  </form>
</td>
    <td colspan="1">
  <form>
  <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>    
  </form>
</td>
    <td colspan="1">
  <form>
  <select name="pets" id="pet-select">
    <option value="">choose</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
  </select>    
  </form>
</td>
</tr></tbody></table>

Answer 2

最简单的解决方案。您可以为其创建另一行。

table {
  border: 1px solid black;
}

<table role="table">
  <tbody>
    <tr>
      <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
          </select>
        </form>
      </td>
      <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
          </select>
        </form>
      </td>
      <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
          </select>
        </form>
      </td>
      <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
          </select>
        </form>
      </td>
      <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
          </select>
        </form>
      </td>
      <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
          </select>
        </form>
      </td>
      <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
          </select>
        </form>
      </td>
      <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
          </select>
        </form>
      </td>
      <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
          </select>
        </form>
      </td>
      <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
          </select>
        </form>
      </td>
      <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
          </select>
        </form>
      </td>
      <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
          </select>
        </form>
      </td>
      <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
          </select>
        </form>
      </td>
      <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
          </select>
        </form>
      </td>
      <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
          </select>
        </form>
      </td>
      <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
          </select>
        </form>
      </td>
      <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
          </select>
        </form>
      </td>
      <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
          </select>
        </form>
      </td>
      <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
          </select>
        </form>
      </td>
      <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
          </select>
        </form>
      </td>
      <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
          </select>
        </form>
      </td>
      <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
          </select>
        </form>
      </td>
      <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
          </select>
        </form>
      </td>
      <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
          </select>
        </form>
      </td>
      <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
          </select>
        </form>
      </td>
      <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
          </select>
        </form>
      </td>
      <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
          </select>
        </form>
      </td>
      <td colspan="1">
        <form>
          <select name="pets" id="pet-select">
            <option value="">choose</option>
            <option value="dog">Dog</option>
            <option value="cat">Cat</option>
          </select>
        </form>
      </td>
    </tr>
    <tr>
      <td></td>
      <td><span><button>Logout</button></span></td>
    </tr>
  </tbody>
</table>

Answer 3

您可以通过以下方式完成，

通过 td {vertical-align: top;}
通过在另一行添加注销按钮
通过使用按钮的 id 或 class，您可以设置其边距和其他属性。

水平对齐 table 的 tr

Align the tr of a table horizontally

html

css

html-table