Table positioned with a slight gap between its edges and the browser border

I am facing an issue with a table that extends beyond the browser edges, and I am unsure how to fix this. Here is the code snippet for the table:

It's important to note that I am using 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;
}

This code is for a school project where we are developing a chatroom. See image here for reference

Answer №1

To prevent the table from growing beyond the available space, consider using max-width: 100% in your CSS.

If the content is too large to fit in your window, check the overflow property as well.

Based on the image provided, using a table for rendering may not be the best choice. You could explore using flexbox CSS, possibly with flexbox-wrap to wrap content to the next line when it's too big.

Answer №2

If you're looking to make your table responsive, that means it will adjust its size to fit the browser window automatically.

One simple way to achieve this is by adding the style attribute "overflow-x:auto;"

For more information on creating responsive tables, you can visit: https://www.w3schools.com/howto/howto_css_table_responsive.asp

Considering you're working with forms, you're probably using Bootstrap, which includes handy classes like "table-responsive" for responsive tables.

Bootstrap also offers a grid system that you can explore further here: https://getbootstrap.com/docs/4.0/layout/grid/

Answer №3

Solution!

  1. Make Changes to the Code Below:
table{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr; /* Set the number of columns to display, e.g. 5 columns of equal fractions */
    grid-template-rows: 1fr 1fr; /* Set the number of rows to display, e.g. 2 rows of equal fractions */
    gap: 10px; /* Specify the gap or spacing between rows and columns */
    margin: 1em;
    border: 2px solid black;
}
table td{
    border: solid 3px;
}

Don't Hesitate to Ask Questions!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript for Loading and Moving Ads in IE8

On my website at , I have placed my AdSense ads at the top of the page. However, I encountered an issue with Internet Explorer 8 where the Javascript code I used to move the ads to a different position on the page doesn't seem to work: <!-- POSI ...

Attempting to increase the size of the menu text upon hover action

It seems like a basic mistake on my part, but I just can't seem to make it work. What I'm trying to achieve is that when you hover over a specific item in the menu, the text within that item should increase in size. However, currently it only en ...

The toggling feature seems to be malfunctioning as the div section fails to display

I'm facing an issue with my Django project while working on a template. I want to toggle the visibility of a div element between hiding and showing, but the function I used isn't working for some reason. I borrowed the function from a different t ...

utilize a modal button in Angular to showcase images

I am working on a project where I want to display images upon clicking a button. How can I set up the openModal() method to achieve this functionality? The images will be fetched from the assets directory and will change depending on the choice made (B1, ...

Column reverse flex-direction is functioning correctly, however, it is imperative that it does not automatically scroll to the bottom

I have a Flexbox set up where I need the contents to display in reverse order. Everything is working well, but the list has many items and the newest ones are appearing at the top. Currently, the Flexbox automatically scrolls to the bottom, but I want it t ...

Updating the chosen value in an HTML select menu dynamically using PHP

I understand that there are existing examples discussing how to dynamically set the selected tag in an HTML option tag. However, I am encountering a complex issue involving break statements and quotations while trying to accomplish this. In my code: whil ...

Creating a proper nth-child CSS for multi-level HTML elements involves understanding the structure of the elements

My current project involves a screen where widgets can be dynamically inserted into the DOM. I am looking to adjust the z-index based on the number of times the class decrement-z-index appears. This is the CSS code I have written in an attempt to achieve ...

Adding CSS code to my index.css file in React is not reflected in my application

I've been following a tutorial on YouTube about reactJS, and the YouTuber recommended importing a CSS file into index.css to properly style the website. However, when I tried copying the CSS code and importing it into both App.js and Index.js, nothing ...

Which is Better for Mobile Web Apps: Multiple Pages or AJAX?

I am currently planning a new project focused on mobile web apps. The project will involve creating a mobile web app with multiple screens, a search system, and various other features. One decision I need to make is choosing the primary framework for this ...

The incorrect CSS styling was applied to the custom input background with the attribute "text"

Is there any way to remove the white border and background that appears around a form input field with type "text"? Looking for some help on this issue! .my-form-login input[type="text"] { background-image: url('../images/text-input.png') ...

Ways to display the ChaptersButton in Videojs-Player

I'm trying to incorporate videojs (version 8.10.0) into my project and provide viewers with a way to select chapters within the video. According to the official documentation, it seems that simply including a track element linking to a VTT file within ...

What is the proper way to eliminate the top margin from a div that has the display table-cell property?

There are two div elements with display: table-cell property: <div> This is a table cell </div> <div> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Som ...

Is it possible to generate distance between 2 elements without utilizing padding or margin?

In my React Native project, I'm currently working with 2 inline buttons - the search and add buttons: https://i.stack.imgur.com/tKZrf.png I'm looking to add some spacing between these buttons without impacting their alignment with the left and ...

Unable to locate external CSS files in Firefox using the absolute file path

On my website, I have included the following line in the <head> section: <link type="text/css" href="C:/myApps/app1/images/css/12.02/main.css" rel="stylesheet" /> Upon viewing the page in Firefox 11.0, it appears that the main.css file is not ...

What is causing my radio button event to activate when a separate radio button is selected?

I have implemented the code below to display "pers" and hide "bus," and vice versa. JQuery: $('input[name="perorbus"]').click(function() { if ($(this).attr('id') == 'bus') { $('#showbus&apo ...

"Disappearing act: Navigating through pages causes the navigation

Struggling with navigation in my asp.net core web app development. My directory structure includes the use of Areas. https://i.sstatic.net/DL6qe.png https://i.sstatic.net/GeEg9.png When navigating through pages in the main folder like Index, Index1, and ...

Alter the class generated by ng-repeat with a click

I currently have a dynamically generated menu displayed on my website, and I am looking to apply a specific class to the active menu item based on the URL (using ngRoutes). The menu items are generated from a $scope.menu object, so my initial thought was t ...

Ways to verify the presence of a Div element within an iframe

Hello everyone. I am looking to determine if the element DIV test is present within an iframe, and if it is, I want to display an alert. <html> <body> <div id="test">test</div> </body> </html> I have loaded thi ...

The HTML navbar seems to have a mind of its own, disappearing and shifting around unpredictably as I zoom in or resize

WHEN DISPLAYING THIS CODE, IT IS ADVISED TO VIEW IN FULL PAGE MODE This code includes navigation, header, and styling elements. However, when the browser is zoomed in or out, the navbar tends to move around and eventually disappears off the screen if wind ...

How to use PHP and JavaScript to update a location marker on Google Maps

I'm new to web development and in need of some help, please. I have a code that is supposed to update the marker location with coordinates retrieved from a database. <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AP ...