html - 表格布局宽度被忽略 CSS HTML

标签 html css

您好,我正在尝试为我的表格设置固定宽度。

我的问题是浏览器(chrome)忽略了我设置的宽度。

我的代码:

<div class="class_table"><table border="1" id="classes_list">

**MY TABLE CODE**

</table></div>

CSS

.class_table
{

font-size: 20px;
margin-top:35px;
margin-left: 25px;
position:absolute;
width:15px;
table-layout: fixed;
}

编辑:

这是我现在与图像一起使用的代码,以表明它不起作用。

HTML:

<head>

<?php

require_once('calssesHelper.php');

session_start();

$classesHelper = new ClassesHelper();

echo $classesHelper->getClasses($_SESSION['gym']);

?>

</head>

PHP:

echo  '<div class="class_table"><table border="1" id="classes_list">';  

echo '<tr>
    <th>Class id</th>
    <th>Name</th>
    <th>Date</th>
    <th>Teacher</th>
    <th>Place</th>
    <th>Message</th>
    <th>Users</th>
</tr>';

$count = 0;

while ($stmt->fetch()) 
{
    if ($count % 2 == 0)
        echo '<tr class="row_color_one_class" id="'.$id.'"><td>'.$id.'</td><td>'.$name.'</td><td>'.$date." ".$time.'</td><td>'.$teacher.'</td><td>'.$place.'</td><td>'.$message.'</td><td>'.$this->countUsersInClass($id)."/".$max_user.'</td>

        <td><button type="button" id="'.$id.'" onclick="removeClass(this.parentNode.parentNode, \''.$gym.'\')" style="cursor: pointer;"><img src="images/program/trash_small.png"></button></td>

        <td><button type="button" id="'.$id.'" onclick="editClass(this.parentNode.parentNode)" style="cursor: pointer;"><img src="images/program/edit_small.png"></button></td>

        <td><button type="button" id="'.$id.'" onclick="classUsers(this.parentNode.parentNode)" style="cursor: pointer;"><img src="images/program/users.png"></button></td>

        </tr>';
    else
        echo '<tr class="row_color_two_class" id="'.$id.'"><td>'.$id.'</td><td>'.$name.'</td><td>'.$date." ".$time.'</td><td>'.$teacher.'</td><td>'.$place.'</td><td>'.$message.'</td><td>'.$this->countUsersInClass($id)."/".$max_user.'

            <td><button type="button" id="'.$id.'" onclick="removeClass(this.parentNode.parentNode, \''.$gym.'\')" style="cursor: pointer;"><img src="images/program/trash_small.png"></button></td>

           <td><button type="button" id="'.$id.'" onclick="editClass(this.parentNode.parentNode)" style="cursor: pointer;"><img src="images/program/edit_small.png"></button></td>

            <td><button type="button" id="'.$id.'" onclick="classUsers(this.parentNode.parentNode)" style="cursor: pointer;"><img src="images/program/users.png"></button></td>

        </td>



        </tr>';

    $count++;
}

echo '</table></div>';

CSS:

.class_table
{

font-size: 20px;
margin-top:35px;
position:absolute;
width:15px;
max-width:15px;
}

.class_table > table {
    table-layout: fixed;
}

结果:

enter image description here

如你所见,我的结果远超过 15px

最佳答案

给你的表格添加宽度应该可行

.class_table>table{
  width: 100%;
}

它适合容器

关于html - 表格布局宽度被忽略 CSS HTML,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22429720/

相关文章:

html - 不使用容器、不使用 JS 能否创建两列多元素?

javascript - 如何在页面加载前调整布局

css - fancybox 的样式表路径在 Wordpress NextGEN 画廊插件中不正确

JavaScript/CSS : dynamically change border color of HTML element

html - 如何在 HTML 电子邮件模板中嵌入图像?

html - 位置 :fixed "hitboxes" move up in iOS 10 Safari on Plus-sized phones when tab bar is shown

html - 流畅的网站还值得制作吗?

javascript - 显示选择 5 星级

html - css override 删除未使用的样式 bootstrap

css动画像谷歌的 'Search tools'