css 表格不接触浏览器边框

isr3a4wc 于 5个月前发布在其他

关注(0)|答案(3)|浏览(74)

我的问题是，我有一个表，它继续，即使它触及浏览器的边缘，我不知道如何解决这个问题。
重要的是我使用PHP

function create_Chat_Table($text){
    $pseudo=$_GET['DATA_Pseudonyme'];
    $output="<form method='get'>";
    $output .= "<table>";
    for ($i = 0; $i < count($text); $i++) {
        $explode = explode(",", $text[$i]);
        if (isset($_GET['DATA_Pseudonyme'])){
            $href='index.php?page=chatrooms&room=' . $explode[0] . '&DATA_Pseudonyme=' . $pseudo;
    }else{
           $href='https://foxi.ltam.lu/2TPIF2/tarlu584/Projet_WSERS_Zelda/index.php?page=Pseudonyme';
        }
        $output .= "<td id='table_chats'><a href=$href>$explode[0]<img src='" . $explode[1] . "' alt='Chat Room Image' width='100px'></td>";
     }
    $output .= "</table>";
    $output.="</form>";

    return $output;

}

个字符
这是我的学校项目，我们正在做一个聊天室enter image description here

css

来源：https://stackoverflow.com/questions/77726803/table-not-touching-the-browser-border

3条答案

按热度按时间

lb3vh1jj1#

你应该尝试在css中使用max-width：100%，它应该可以防止表增长超过可用空间。
如果内容太大而无法容纳在窗口中，您还可以检查溢出属性。
另外，正如我在图片上看到的，table可能不是渲染的更好选择，你应该尝试flexbox css，也许当内容太大时，可以使用flexbox-wrap将内容 Package 到下一行。

赞(0）回复(0）举报 5个月前

rnmwe5a22#

这听起来像是你希望你的表格是响应式的。这意味着它会自动调整大小以适应浏览器窗口。
一种方法是添加style=“overflow-x：auto;”
来源：https://www.w3schools.com/howto/howto_css_table_responsive.asp
但是因为你使用的是表单，我假设你使用的是bootstrap，它带有一些内置的类，比如class=“table-responsive”。
Bootstrap也有一个网格系统，你可以在这里阅读：
https://getbootstrap.com/docs/4.0/layout/grid/的

赞(0）回复(0）举报 5个月前

vh0rcniy3#

解决方案！

1.只是改变一些行代码这里是例子：

table{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; /* To display how many columns you want to see like here there are 5 1fr it means equal 5 fractions respect to screen width it means 100% responsive */
    grid-template-rows: 1fr 1fr; /* To display how many rows you want to see like here there are 2 1fr it means equal 2 fractions/rows respect to screen width it means 100% responsive */
    gap: 10px; /* gap or spacing between rows and columns */
    margin: 1em;
    border: 2px solid black;
}
table td{
    border: solid 3px;
}

字符串

Feel Free To Ask Doubts！

赞(0）回复(0）举报 5个月前

我来回答

css 表格不接触浏览器边框

3条答案

相关问题

热门标签

最新问答