html - 如何将 1 个表中的 s 与另一个表对齐？

Question

我是 HTML/CSS 的新手，我很难将鸡肉店的营业时间、营业时间、关闭日期与表格中的营业时间、营业时间和关闭时间对齐。我希望日期和时间直接在每个类别下方对齐。例如开放（周日/周一..）、营业时间（晚上 9 点至下午 3 点）、关闭（周二/周五）。以下是我的代码，任何建议将不胜感激！！！谢谢！！！

<table id="shops">
        <tr>
            <th>Shops</th>
            <th>Location</th>
            <th>Store Hours</th>
            <th>Products</th>
        </tr> <!-- Nested table for store hours and product types-->
        <tr>
            <td colspan="2"></td>
            <td>
                <table id="hours_table">    
                    <tr>
                        <th>OPEN</th>
                        <th>HOURS</th>
                        <th>CLOSE</th>
                    </tr>
                </table>
            </td>
            <td> 
                <table id="products_table">    
                    <tr>
                        <th>Animals</th>
                        <th>Cost</th>
                        <th>Items</th>
                        <th>Cost</th>
                    </tr>
                </table>
            </td>
        </tr>


        <tr>
            <td id="chicken_shop">Cuckoo House Chicken Shop</td>
            <td>West Natura</td>
            <td>
                <table id="chicken_hours"> 
                    <tr>
                        <td>SUN/MON/WED/THURS/SAT</td>
                        <td>9AM - 3PM</td>
                        <td>TUES/FRI</td>
                    </tr>
                </table>
            </td>
</table>

标签： htmlnestedalignment

Answer 1

您好，解决方法如下：

<table id="shops" border='1'>
  <tr>
    <th>Shops</th>
    <th>Location</th>
    <th>Store Hours</th>
    <th colspan="4">Products</th>
  </tr> <!-- Nested table for store hours and product types-->
  <tr>
    <td id="chicken_shop">Cuckoo House Chicken Shop</td>
    <td>West Natura</td>
    <td>
      <table width="333" id="hours_table" border='1'>
        <tr>
          <td>OPEN</td>
          <td>HOURS</td>
          <td>CLOSE</td>
        </tr>
        <tr>
          <td>SUN/MON/WED/THURS/SAT</td>
          <td>9AM - 3PM</td>
          <td>TUES/FRI</td>
        </tr>
      </table>
    </td>
    <th>Animals</th>
    <th>Cost</th>
    <th>Items</th>
    <th>Cost</th>
  </tr>
</table>