Html Question posted in
Some basic documentation can be found here.

Html – Table not touching the browser border

my problem is that i have a table and it continues even if it touches the edges of the browser and i don’t know how to solve this
Here IS m’y code from the table

Important to mention I use 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;

}

table{
    display: inline-table;
    margin: 1em;
    border: 2px solid black;
}
table td{
    border: solid 3px;
}

Its for m’y school project WE are doing a chatroomenter image description here

Tags:

3

Answers


  1. 0

    You should try a max-width: 100% in css, it should prevent the table to grow more than available space.

    If content is to huge to fit in your windows, you might also check for overflow property.

    Also, as i see on picture, table might not be the better choice for rendering. You should try flexbox css, maybe with a flexbox-wrap to wrap content to next line when it’s too big.

    Login or Signup to reply.
  2. 0

    It sounds like you want your table to be responsive. This means it will automatically resize to fit in the browser window.

    One way to do this would be to add style="overflow-x:auto;"

    source: https://www.w3schools.com/howto/howto_css_table_responsive.asp

    But since you’re using forms, I assume you’re using bootstrap which comes with some built in classes like class="table-responsive"

    Bootstrap also has a grid system which you can read about here:

    https://getbootstrap.com/docs/4.0/layout/grid/

    Login or Signup to reply.
  3. 0

    Solution!

    1. Just Change Some Lines Codes here is example:
    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!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search