首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何将一个表中的<td>s与另一个表对齐?

如何将一个表中的<td>s与另一个表对齐?
EN

Stack Overflow用户
提问于 2019-10-28 09:10:40
回答 2查看 32关注 0票数 0

我是HTML/CSS的新手,我很难将鸡店的开业日期、营业时间和关门日期与开业时间、营业时间和关门日期对齐。我希望日期和时间在每个类别的正下方对齐。例如开放(周日/周一)、小时(9-3 3pm)、关闭(星期二/星期五)。以下是我的代码,任何建议都将不胜感激!谢谢!

代码语言:javascript
运行
复制
<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>
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-10-28 11:22:44

嗨,这是解决方案:

代码语言:javascript
运行
复制
<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>

票数 0
EN

Stack Overflow用户

发布于 2019-10-28 10:21:13

您必须使用<td>,而不是使用<th>,即使它是表头的一部分。

代码语言:javascript
运行
复制
  <table>
    <thead>
       <tr>
          <td>Shops</td>
          <td>SOmethng</td>
          <td>Something#2</td>
       </tr>
   </thead>
   <tbody>
       <tr>
          <td>Something in the body of the table</td>
          <td>something</td>
           <tdSomething</td>
       </tr>
   </tbody>
  </table>

我建议对于额外的info.Also使用w3schools.com,你可以添加边框,以防你想在它周围添加一些边框。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/58584733

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档