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

Numerous websites with scroll-based navigation

I am currently building a unique website that includes scrolling in various directions without the use of a horizontal scrollbar. The design is similar to this image: https://i.stack.imgur.com/Ex2Bf.jpg. It is a one-page website where vertical scrolling ...

jqueryhtmlcssscroll

What is the best method for establishing a page location during rendering/onload?

It seems like there is a JavaScript event happening here using the onload attribute. But for the life of me, I can't seem to crack this code. <body onload="moveToHere('reference')"> I'm stuck and could really use some assistance ...

javascripthtml

What is the best way to create two fields side by side within a single row?

I'm struggling to merge the data array of two different identity types into one row as a field. Here's the code I've written: import React from 'react' import {Form,Field,ErrorMessage,Formik} from 'formik' import * as yup ...

javascripthtmlcssreactjstailwind-css

Parsing HTML with AngleSharp - Extracting Text from IElement

I am currently developing an HTML parser using AngleSharp that takes input in the following format: <p> Paragraph Text <a href="https://www.example com" class="external text" target="_new" rel="nofollow">Link Text</a> Paragraph Text 2 &l ...

c#htmlparsinganglesharp

Is it possible for my OAuth2 callback page to share the same HTML page? Also, what is the process for obtaining the token?

In my setup, I am working with static html and javascript along with C# Web API. One of the scenarios I encountered involves a link that triggers an oauth2 server from my HTML file named index.html. The question arises: Is it appropriate to establish the c ...

c#javascriptjqueryhtmloauth-2.0

What is the best way to integrate JavaScript with my HTML command box?

I'm having some trouble with an HTML command box that is supposed to execute commands like changing stylesheets and other tasks. I thought I had everything set up correctly, but it doesn't seem to be working at all. Below is the HTML code with th ...

javascripthtml

Display an image on an HTML page based on the TypeScript data in an Ionic Angular application

After retrieving user profile data from the database and storing it in an observable, I am able to access properties such as profileData.username, profileData.msgnumber, and more. When profileData.avatar returns the name of the avatar the user is using, I ...

htmlangulartypescriptionic-framework

Utilizing JQuery AJAX and PHP for Data Encoding

My webpage is encoded in HTML with the charset ISO-8859-2. All content on the page adheres to this charset and appears correctly. However, I am facing an issue when making an Ajax call to a PHP server. When I send the character á and receive the same valu ...

phpjqueryhtmlajaxencoding

Is there a way to prevent my Header links from wrapping during window size testing?

https://i.stack.imgur.com/YTc3F.png The image above showcases my standard header layout, while the one below illustrates what occurs as I resize the window. https://i.stack.imgur.com/re44T.png Is there a specific CSS solution to prevent the Text navLink ...

cssmaterial-ui

Blurring of text that occurs after resizing in CSS

When I use scale transform to zoom a div in HTML, the text inside becomes blurred. Is there a solution to make the text clear like the original? @keyframes scaleText { from { transform: scale(0.5, 0.5); } to { transform: scale(2, 2); } } ...

htmlcss

Using a numeral within a Font Awesome icon symbol to customize a label for a Google Maps marker

I have a Google Maps marker displayed below, applying a Font Awesome icon as the label/icon. However, I am unsure how to a.) change the color of the marker and b.) include a number inside the marker. Referencing this Stack Overflow post This is the code ...

javascripthtmlcssgoogle-mapsgoogle-maps-markers

Modifying the content within a DIV element

I want to make changes to my DIV. <div id="main"> <div id="one"> <div class="red"> ... </div> <img class="avatar" src="img/avatar1.jpg"/> <span class="name"> John < ...

javascriptjqueryhtmldomweb

I'm looking for the best way to display an error message in HTML using a custom validation directive that I'm creating

<!DOCTYPE html> <html><!--starting of html--> <script src="angular.js"></script> <body ng-app="myApp"> <p>Feel free to type in the input field:</p> <form name="myForm"> <input name="myInput" type=" ...

htmlangularjsnode.js

Creating a unique look for unordered list items in a dropdown navigation

I'm currently working on creating a drop-down menu using nested unordered lists. The functionality of the menu is all set, but I'm running into some styling issues. The main link that triggers the drop-down should have a blue background with whit ...

htmlcssdrop-down-menu

Discovering the page load times of web elements on a website with the help of Selenium WebDriver

On my HTML5 webpage, there are 4 charts that each take a different amount of time to load after the static content has already loaded. The loading process is indicated by a 'rendering' circle image for all 4 charts. I am looking for a way to dete ...

htmlselenium-webdriverwebpage-renderingresponse-timeqwebelement

Learn how to swap out the traditional "back to top" button with a customized image and make it slide onto or off the page instead of simply fading in and out

As a newcomer, I am trying to replicate a unique "back to top" effect that caught my eye on another website. Instead of the traditional fade-in approach when scrolling down, the "back to top" image in question elegantly slides out from the bottom right c ...

javascriptjqueryhtmlcss

Code that achieves the same functionality but does not rely on the

I utilized a tutorial to obtain the ajax code below. The tutorial referenced the library jquery.form.js. Here is the code snippet provided: function onsuccess(response,status){ $("#onsuccessmsg").html(response); alert(response); } $("# ...

javascriptjqueryhtmlajaxforms

Is there a technique to block small increments in a Time Input field?

Currently in the process of developing a tool to automate task scheduling within an Angular app. I am looking for a way to restrict the user's input when selecting the hour for task execution without having to install a complex input management packag ...

javascripthtmlangulartypescript

Strange HTML pop-up keeps appearing every time I use styles in my code or insert anything with CSS

Recently, I created an OctoberCMS backend setup through my cPanel (I also have one on my localhost). Now, I am trying to add a background image but every time I attempt to do so, a strange HTML popup appears that I can't seem to figure out. Here is th ...

phphtmlcsscontent-management-systemoctobercms

"Owlcarousel Slider: A beautiful way to showcase

Currently, I am working on a project that involves implementing a slider. Since I lack expertise in JavaScript, I opted to use a plugin called owlcarousel. The challenge I'm encountering relates to the sizing of the container for the items. I'm ...

javascriptjqueryhtmlcssowl-carousel