What is the best way to display two tables together using inline styling?

I attempted to display 2 tables inline by setting their display property to inline, but unfortunately, it did not work as expected.

Is there a more straightforward way to achieve the desired inline display for these tables?

table {
  display: inline;
}
table, td, th {
   border: 1px solid black;
   }
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

htmlcss

Answer №1

Give this a shot. For creating 2 tables in inline style, you'll need to start with an outer table. Within the `<td>` of that table, you can place inner tables using `<table>`. 

<table width="1000">
<tr>
<td>
<table border="1" width="500">
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    </tr>
    <tr>
    <td>Lois</td>
    <td>Griffin</td>
    </tr>
</table>
</td>
<td>
<table border="1" width="500">
    <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    </tr>
    <tr>
    <td>Lois</td>
    <td>Griffin</td>
    </tr>
</table>
</td>
</tr>
</table>

Answer №2

Try using the display:inline-table property.

Check out this detailed explanation on MDN Reference

In CSS, the inline-table value functions like a regular HTML table element, but it is displayed as an inline box instead of a block-level box. The content inside the table box is treated as a block-level context.

table {
  display: inline-table;
}
table,
td,
th {
  border: 1px solid black;
}
<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>


<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
  </tr>
  <tr>
    <td>Lois</td>
    <td>Griffin</td>
  </tr>
</table>

Answer №3

When incorporating bootstrap, it is recommended to make use of the column structure.

If tables are not being used, consider using the float property.

  table {
    float: left;
  }

Check out this code sample on fiddle

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

How to Use PHP to Submit Form Information

I am a beginner in PHP and I need help with sending form details to an email address. I have tried looking for solutions online but I keep running into the same issue - when I submit the form, it downloads the PHP file instead of sending an email. Below i ...

javascriptphpjqueryhtmlforms

What is the technique for causing this element to move in reverse?

How can I utilize JS to halt the interval and direct the alien to move backwards once it reaches 700px? I am aware that CSS can achieve this, but I prefer a strictly JS approach. I am struggling with stopping the interval as it hits the left position of 70 ...

javascripthtmlcss

Avoid repeating media queries in MUI JSS by combining them efficiently

Is there a more efficient way to apply the same set of CSS styles to multiple media query rules without repetition? Currently, the only workaround seems to be: [theme.breakpoints.up('xl')]: { color: 'red', backgroundColor: 'gre ...

cssreactjsmaterial-uijss

Responsive breakpoints in TailwindCSS seem to have an issue with applying padding and margin styles properly

Currently, I am tackling a project that involves creating a responsive design with Tailwind CSS on nuxtjs. Has anyone encountered the issue of py-8 applying to both breakpoints? If so, please share your insights! Here is how I have structured the compone ...

cssvue.jsnuxt.jstailwind-css

Changing CSS module variables through JavaScript programming

I'm currently utilizing an older version of react-boilerplate that includes CSS Modules, allowing for the creation of variables and the ability to import them into other CSS files. Below is my colors.css file: :root { /* Status colors */ --error ...

csspostcsscss-modulesreact-css-modulesreact-boilerplate

Acquire HTML table information in array format using JavaScript

I am searching for a script that can extract the 2D array of rows and columns from an HTML table within a div element. The desired array output should be: [ ["Company", "Contact", "Country"], ["Alfreds Futterkiste", "Maria Anders", "Germany"], ...

javascripthtmljquery

Tips for displaying an HTML page using JavaScript

In my project, I am working with an .html file (File X) that needs to immediately open another .html file (File Y) based on a certain value. Could someone provide guidance on the best way to achieve this using JavaScript? Additionally, I would like the pa ...

javascripthtml

Using jQuery's .load() method to load a PHP file can result in an exponential increase in XHR finished loading time with each subsequent load

There seems to be an issue with my code using .load() to load a PHP page into a div whenever the navbar or link is clicked. After multiple clicks, I noticed that the "XHR finished loading" increases exponentially and it appears that the same PHP file is be ...

javascriptphpjqueryhtmlperformance

creating a table displaying data in a horizontal format sourced from ajax/json transformation

I am currently working on a piece of code that retrieves a list of IDs from local storage and compares them to IDs in a JSON file. If there is a match, the corresponding data is displayed in a table. However, I am facing an issue with my table layout as i ...

jqueryhtmlajax

Conflicting Transformation Properties Causing CSS Issues Within a Single Element

I'm currently working on a user interface where users can drag and drop a box with a red outline to position it on the screen within a black box. See the UI here Alternatively, users can also move the box by adjusting the inputs on the right side. ...

javascriptcssangulardrag-and-droptranslate3d

What is the best way to eliminate the blue outline around an image map?

On the landing page, I have a static background image and I've set up a clickable area using an image map. The issue is that when users click on the area, a blue border appears (see image below). I've tried several methods to remove this border b ...

htmlcss

Why am I only able to send form data using the GET method and not the POST method?

I'm currently delving into the realm of html and php, but I seem to have hit a snag. When utilizing the GET method in my html form, parameters are successfully sent to my php file. However, when attempting the same with the POST method, no parameters ...

phphtmlforms

Regularly fetching images from PHP page

Recently, I encountered a challenge with a PHP page that retrieves arguments from the URL to generate an image. The image type (png, gif, etc.) is unknown. Typically, the page is used to embed the image in a standard HTML page like so: <img src="page.p ...

phphtmlimage

Error arising from CSS positioning with dynamically generated images

My challenge is displaying dynamic images from a database alongside details like color, name, and size, with a hover effect that shows a border. Whenever I hover over one image, the other images shift to the right or left. I want them to stay in place. T ...

cssposition

Submitting documents via jQuery post

I am facing an issue with my HTML form where I am trying to upload an image file. After submitting the form, I use JavaScript to prevent the default action and then make a jQuery post request (without refreshing the page) with the form data. However, despi ...

jqueryhtmlajaximagepost

Creating a dynamic menu structure by tailoring it to the specific elements found on each page

Currently, I am facing issues while attempting to generate a dynamic menu based on the elements present on the page. Is there a way to develop a menu using the following code structure?: <div class="parent"> <div class="one child" id="first"& ...

javascriptjqueryhtml

Exploring the Depths of the Internet: Uncovering Data with BeautifulSoup

I am currently working on extracting the rain chance and temperature/wind speed data for each baseball game from rotowire.com. My goal is to organize this data into three columns - rain, temperature, and wind. I have made some progress with the help of ano ...

pythonhtmlweb-scrapingbeautifulsoup

Obtaining the element ID with Selenium WebDriver in cases of dynamic IDs

I am encountering an issue with the drop-down image element. I have attempted various methods to select the element, but none of them seem to be working. This may be due to the fact that both elements are identical and their IDs are dynamic. I did manage ...

javahtmlseleniumselenium-webdriver

What is the best way to eliminate the input border?

click here for image I'm currently working on designing a straightforward login page. However, I've noticed that there are black borders around the input fields. Can anyone help with how to remove these borders? ...

htmlcss

Why does Drupal's Advagg display several css and js files?

After installing the Advag module, I noticed that it is combining files, but there seems to be an issue: <link type="text/css" rel="stylesheet" href="/sites/default/files/advagg_css/css__sqX0oV0PzZnon4-v--YUWKBX0MY_EglamExp-1FI654__IOPiOtulrIZqqAM0BdQC ...

javascriptcssdrupal-7