文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >CSS更改td大小

问CSS更改td大小
EN

Stack Overflow用户
提问于 2015-09-24 11:06:53
回答 2查看 1.3K关注 0票数 3

我正在努力创造一张漂亮的桌子。我找到了一个模板，我想修改它。问题是，如果我想修改顶部标题的字体大小，"head_nav“中的标题就像这样：#head_nav th{ font-size: 30px;}什么都不会发生。我做错了什么吗？另外，我想让数据"TD“变成一个方形，而不是矩形，所以我尝试了这个：tr, td{ width: 100%; height:100%;}，但是再次什么也没有发生。

这是我的密码：

​

代码语言：javascript
复制
<!doctype html>
<html>
<head>
    <title>Timetable</title>
    <style type="text/css">
    body
    {
        font-family: arial;
    }

    th,td
    {
        margin: 0;
        text-align: center;
        border-collapse: collapse;
        outline: 1px solid #e3e3e3;
    }

    td
    {
        padding: 5px 10px;
    }

    th
    {
        background: #666;
        color: white;
        padding: 5px 10px;
    }

    td:hover
    {
        cursor: pointer;
        background: #666;
        color: white;
    }
    </style>

</head>

<body>
    <table width="80%" align="center" >
    <div id="head_nav">
    <tr>
        <th>Time</th>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday</th>
        <th>Thrusday</th>
        <th>Friday</th>
        <th>Saturday</th>
    </tr>
    </div>  
    
        <tr>
            <th>10:00 - 11:00</th>
            
                <td>Physics-1</td>
                <td>English</td>
                <td title="No Class" class="Holiday"></td>
                <td>Chemestry-1</td>
                <td>Alzebra</td>
                <td>Physical</td>
            </div>
        </tr>
    
        <tr>
            <th>11:00 - 12:00</td>
            
                <td>Math-2</td>
                <td>Chemestry-2</td>
                <td>Physics-1</td>
                <td>Hindi</td>
                <td>English</td>
                <td>Soft Skill</td>
            </div>
        </tr>
    
        <tr>
            <th>12:00 - 01:00</td>
            
                <td>Hindi</td>
                <td>English</td>
                <td>Math-1</td>
                <td>Chemistry</td>
                <td>Physics</td>
                <td>Chem.Lab</td>
    
            </div>
        </tr>
    
        <tr>
            <th>01:00 - 02:00</td>
            
                <td>Cumm. Skill</td>
                <td>Sports</td>
                <td>English</td>
                <td>Computer Lab</td>
                <td>Header</td>
                <td>Header</td>
    
            </div>
        </tr>
    
        <tr>
            <th>02:00 - 03:00</td>
            
                <td>Header</td>
                <td>Header</td>
                <td>Header</td>
                <td>Header</td>
                <td>Header</td>
                <td>Header</td>
            </div>
        </tr>
    </table>
</body>

​

html
css
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2015-09-24 11:11:51

您的代码无效，请尝试以下操作。

代码语言：javascript
复制
 table tr:first-of-type

不要在div中插入表元素，也不要使用特定的选择器，或者给td/tr提供类/id。

正如您已经被告知的，内联CSS是一种糟糕的做法，因此将其移动到一个单独的CSS文件中。

​

代码语言：javascript
复制
  body {
      font-family: arial;
  }
  th, td {
      margin: 0;
      text-align: center;
      border-collapse: collapse;
      outline: 1px solid #e3e3e3;
  }
  td {
      padding: 5px 10px;
  }
  th {
      background: #666;
      color: white;
      padding: 5px 10px;
  }
  td:hover {
      cursor: pointer;
      background: #666;
      color: white;
  }
  table tr:first-of-type {
      font-size:30px;
  }
代码语言：javascript
复制
<title>Timetable</title>
<table width="80%" align="center">
    <tr>
        <th>Time</th>
        <th>Monday</th>
        <th>Tuesday</th>
        <th>Wednesday</th>
        <th>Thrusday</th>
        <th>Friday</th>
        <th>Saturday</th>
    </tr>
    <tr>
        <th>10:00 - 11:00</th>
        <td>Physics-1</td>
        <td>English</td>
        <td title="No Class" class="Holiday"></td>
        <td>Chemestry-1</td>
        <td>Alzebra</td>
        <td>Physical</td>
        </div>
    </tr>
    <tr>
        <th>11:00 - 12:00</td>
            <td>Math-2</td>
            <td>Chemestry-2</td>
            <td>Physics-1</td>
            <td>Hindi</td>
            <td>English</td>
            <td>Soft Skill</td>
            </div>
    </tr>
    <tr>
        <th>12:00 - 01:00</td>
            <td>Hindi</td>
            <td>English</td>
            <td>Math-1</td>
            <td>Chemistry</td>
            <td>Physics</td>
            <td>Chem.Lab</td>
            </div>
    </tr>
    <tr>
        <th>01:00 - 02:00</td>
            <td>Cumm. Skill</td>
            <td>Sports</td>
            <td>English</td>
            <td>Computer Lab</td>
            <td>Header</td>
            <td>Header</td>
            </div>
    </tr>
    <tr>
        <th>02:00 - 03:00</td>
            <td>Header</td>
            <td>Header</td>
            <td>Header</td>
            <td>Header</td>
            <td>Header</td>
            <td>Header</td>
            </div>
    </tr>
</table>

​

票数 3
EN

Stack Overflow用户

发布于 2015-09-24 11:13:49

因为您所做的代码无效。看看这个也许能帮你..。

​

代码语言：javascript
复制
 body {
   font-family: arial;
 }
 th,
 td {
   margin: 0;
   text-align: center;
   border-collapse: collapse;
   outline: 1px solid #e3e3e3;
 }
 td {
   padding: 5px 10px;
 }
 th {
   background: #666;
   color: white;
   padding: 5px 10px;
 }
 td:hover {
   cursor: pointer;
   background: #666;
   color: white;
 }
代码语言：javascript
复制
<table width="80%" align="center">
  <tr>
    <th>Time</th>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
    <th>Thrusday</th>
    <th>Friday</th>
    <th>Saturday</th>
  </tr>

  <tr>
    <th>10:00 - 11:00</th>

    <td>Physics-1</td>
    <td>English</td>
    <td title="No Class" class="Holiday"></td>
    <td>Chemestry-1</td>
    <td>Alzebra</td>
    <td>Physical</td>
  </tr>

  <tr>
    <th>11:00 - 12:00</td>

      <td>Math-2</td>
      <td>Chemestry-2</td>
      <td>Physics-1</td>
      <td>Hindi</td>
      <td>English</td>
      <td>Soft Skill</td>
  </tr>

  <tr>
    <th>12:00 - 01:00</td>

      <td>Hindi</td>
      <td>English</td>
      <td>Math-1</td>
      <td>Chemistry</td>
      <td>Physics</td>
      <td>Chem.Lab</td>
  </tr>

  <tr>
    <th>01:00 - 02:00</td>

      <td>Cumm. Skill</td>
      <td>Sports</td>
      <td>English</td>
      <td>Computer Lab</td>
      <td>Header</td>
      <td>Header</td>

  </tr>

  <tr>
    <th>02:00 - 03:00</td>

      <td>Header</td>
      <td>Header</td>
      <td>Header</td>
      <td>Header</td>
      <td>Header</td>
      <td>Header</td>
  </tr>
</table>

​

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

https://stackoverflow.com/questions/32759779

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

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