Having recently started learning CSS, I'm unsure about which property to use in order to position the table where I desire.
My attempt with the float: right property resulted in the table moving to the bottom right instead.
https://i.sstatic.net/BI7Cd.png
Please excuse any errors in my English :)
To organize all three table's, place them within a single parent wrapper and apply the CSS property display: flex;. You can then use either justify-content: space-around; or space-between based on your preference to align them.
This setup arranges all tables in a row. You can specify a specific width for each table using the calc function to ensure they fit perfectly. Additionally, add a left and right margin of 1em to create appropriate spacing between the tables.
table elements are not inherently responsive, so it's recommended to include media-queries for different screen sizes. For instance, you can make the tables stack vertically on smaller screens by utilizing a media query with flex-direction: column;.
table,
th,
td {
border: 1px solid black;
}
.wrapper {
display: flex;
justify-content: space-around;
}
table {
width: calc(100% / 3);
margin: 0 1em;
}
@media only screen and (max-width: 800px) {
.wrapper {
flex-direction: column;
}
table {
width: 100%;
margin: 1em 0;
}<div class="wrapper">
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
</div>Give this a shot:
div .table-center {
display:flex;
align-items: center;
justify-content: center;
}
div .table-right {
display:flex;
align-items: end;
justify-content: end;
}
To showcase these 3 tables effectively, place them within a parent container and utilize the display:flex property
<div style="display: flex; justify-content: space-between">
<div>
Table 1
</div>
<div>
Table 2
</div>
<div>
Table 3
</div>
</div>
For more information on CSS Flexbox, visit: https://www.w3schools.com/css/css3_flexbox.asp
Take a look at this example on jsFiddle. When using IE, the external CSS is loaded and the rectangle is red, but in Chrome and FF the rectangle stays black. What causes this difference? <!-- Used for referencing the external css --> <?xml-styl ...
I am looking to add a unique parallax transition to my website, specifically one that features a nice scroll followed by a subtle bounce effect. For example, I want to incorporate an arrow that, when clicked, smoothly scrolls the user to the bottom of th ...
After uploading the file.css file to the server using both FileZilla and cPanel, I noticed that when I visit the website, the CSS is not being applied properly. Specifically, I changed padding-left: 10px; However, upon viewing the Page source, it appears ...
Below is the HTML code that I am working with: <div id="texttheory" class="centertext">'. $short .' </div>'; <button id="thbutton" class="theory_button" onclick="javascript:changetheory('.$long.')"> <im ...
Working with bootstrap 4.1, I encountered an issue where I needed to hide certain elements only on mobile devices. The official documentation suggested using the d-sm-none d-md-block classes, but unfortunately, it did not work as expected. To hide eleme ...
Could someone please help me figure out why my custom Facebook share button is not functioning properly? When I click the button, the share window fails to appear. I have tested it as an html file on a live web server and have thoroughly reviewed the Faceb ...
Enhanced Functionality: Upon clicking the "Tap Here" image button, a function called "GameStart()" is triggered. This function ensures that the main image "Star" descends down the page from the top through an animated sequence using png logic. The propose ...
First question on StackOverflow. I have a Next App and the Navbar is being imported in the _app.js file. import Navbar from "../Components/Navbar"; function MyApp({ Component, pageProps }) { return ( <> <Navbar /> ...
I am currently facing challenges with implementing web workers in my program. The example provided here is a simplified version of the code structure. There are 4 key files involved: index.html <!DOCTYPE html> <html> <head> <me ...
I'm facing a challenge with centering a material-ui Simple Breadcrumbs component within a footer as opposed to having it aligned to the left. Even though I'm new to this, I thought it would be straightforward but I can't seem to figure it ou ...
I'm currently using a combination of Spring 3.1.3, Prime Faces 3.4.2, Hibernate 3.6.8, and Pretty Faces 2.0.4. When I deploy my application on a local server (Apache Tomcat 7), the CSS displays properly. However, when I deploy the same project to Her ...
I'm currently working on implementing a cookie stored using PHP to check if a user is logged in. Here is how I am setting the cookie: else $keep_alive = time()+(86400 * 14); setcookie("id",mysql_result($result, 0, "id"),$keep_alive, "/", "mydomain.c ...
I am a beginner with bootstrap and flask. I am querying a flask API and receiving a response of 20 rows, which I am displaying using bootstrap cards like this: <div class="row"> {% for item in data %} <div class="card" ...
I'm currently stuck in a function and believe it would be helpful for you to guide me along the correct path. My goal is to sum the values of checked boxes with the values of checked radio buttons. However, the radio values are continuously accumulat ...
My website contains more than 3 tabs and several charts interspersed between tables. Based on the requirement, we have not set a fixed size for the tables. Therefore, the height of the table varies depending on the data. I am looking to fix the headers o ...
I'm encountering the ExpressionChangedAfterItHasBeenCheckedError due to my getter function, selectedRows, in my component. public get selectedRows() { if (this.gridApi) { return this.gridApi.getSelectedRows(); } else { return null; } } ...
I am interested in creating my own class that extends an HTML element class such as HTMLDivElement or HTMLImageElement. Following the standard inheritance pattern: // Class A: function ClassA(foo) { this.foo = foo; } ClassA.prototype.toString = fun ...
The toggle button group in the form below utilizes Bootstrap and checkboxes. I am looking to track click events on the checkbox inputs. <html> <head> <title>Example: Bootstrap toggle button group</title> <meta charset="UTF-8 ...
I have a table named "products" in my MySqli Database. Products TABLE product_id | INT primary KEY product_name | VARCHAR(50) product_price | float When entering rows into the products table from PHP, I use the following code: mysq ...
Lately, I've observed a trend where websites are consolidating multiple images into one large image, similar to Google's homepage. Although we see many small images on the left side, it is actually just one single image: I am curious about how ...