Showing a table alongside a span with a specified width

Question

Showing a table alongside a span with a specified width

One of the challenges I'm facing involves a dynamic width <table> element within my HTML, which changes based on the window size, and a fixed width <span> element set to 500px.

My goal is to have both elements displayed next to each other in a way that they fill the entire width of the parent container.

It's important for me to achieve this using only CSS, without relying on JavaScript.

I've been experimenting with various CSS approaches, but it seems to be affecting the table's width in ways I didn't anticipate.

HTML

<div class='container'>
   <table class='table'>....</table>
   <span class='span'>....</span>
</div>

CSS

.container {
   ......
}

.table {
  .....
}

.span {
   width: 500px;
   display: inline-block; //or block if necessary
}

html css

Answer 1

Answer №1

To experiment, you can try using the table-layout property with .container and span.

Browsers are expected to automatically create any missing elements needed to generate the first table-cell.

See a demonstration here

span {
  display:table-cell;
  width:500px;
  border:solid;
}
table {
  border:solid;
  margin:0;
  width:100%;
}
.container {
  display:table;
  width:100%;
  table-layout:fixed;
}

This method should be effective

due to the use of table-layout:fixed

and because browsers will fill in missing elements on their own (such as creating a tbody within a <table> if missing, or adding necessary tags like html or body).

Answer 2

To experiment, you can try using the table-layout property with .container and span.

Browsers are expected to automatically create any missing elements needed to generate the first table-cell.

See a demonstration here

span {
  display:table-cell;
  width:500px;
  border:solid;
}
table {
  border:solid;
  margin:0;
  width:100%;
}
.container {
  display:table;
  width:100%;
  table-layout:fixed;
}

This method should be effective

due to the use of table-layout:fixed

and because browsers will fill in missing elements on their own (such as creating a tbody within a <table> if missing, or adding necessary tags like html or body).

Answer 3

Answer №2

Demo

Styling with CSS

body, html {
    margin:0;
    padding:0;
}
.container {
}
table {
    width: calc(100% - 500px);
    border-collapse: collapse;
    float: left;
}
/* Zebra striping */
 tr:nth-of-type(odd) {
    background: #eee;
}
th {
    background: #333;
    color: white;
    font-weight: bold;
}
td, th {
    padding: 6px;
    border: 1px solid #ccc;
    text-align: left;
}
.span {
    display: inline-block;
    width: 500px;
    height: 100px;
    background: red;
}

Adding html elements

<div class='container'>
    <table>
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>etc</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Gaurav</td>
                <td>Singh</td>
                <td>etc</td>
            </tr>
            <tr>
                <td>Gaurav</td>
                <td>Singh</td>
                <td>etc</td>
            </tr>
        </tbody>
    </table> <span class='span'>....</span>

</div>

Answer 4

Demo

Styling with CSS

body, html {
    margin:0;
    padding:0;
}
.container {
}
table {
    width: calc(100% - 500px);
    border-collapse: collapse;
    float: left;
}
/* Zebra striping */
 tr:nth-of-type(odd) {
    background: #eee;
}
th {
    background: #333;
    color: white;
    font-weight: bold;
}
td, th {
    padding: 6px;
    border: 1px solid #ccc;
    text-align: left;
}
.span {
    display: inline-block;
    width: 500px;
    height: 100px;
    background: red;
}

Adding html elements

<div class='container'>
    <table>
        <thead>
            <tr>
                <th>First Name</th>
                <th>Last Name</th>
                <th>etc</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Gaurav</td>
                <td>Singh</td>
                <td>etc</td>
            </tr>
            <tr>
                <td>Gaurav</td>
                <td>Singh</td>
                <td>etc</td>
            </tr>
        </tbody>
    </table> <span class='span'>....</span>

</div>

Showing a table alongside a span with a specified width

Answer №1

Answer №2

Similar questions

Creating an element that remains in a fixed position in relation to its parent container, rather than the entire screen - here's how

Guide to positioning an image absolutely within a div

Troubles encountered with adapting apexcharts size within a react environment

Struggling with implementing Vue.js for making a task list using Bootstrap 5

Conceal or eliminate an element from the list upon selection

What is the best way to create images that move at random speeds down the screen in a JavaScript video game?

Manipulating CSS rules using JavaScript/jQuery

Clicking the mouse will eliminate the input's focus

Is there a way to prevent the body content of this modal from overflowing outside of the modal box? I want to ensure that the text remains contained within the modal

Position the Figcaption over the Image

The active class in the Bootstrap carousel is not updating when trying to change

What is the best way to effectively utilize bootstrap and JavaScript together?

iOS creates dynamic images with artifacts that appear on a generated and animated canvas

Is there a way to make jQuery insert a placeholder before the image fades in?

Issue with scrolling when Bootstrap modal is opened on top of another modal

How can one make the image pop and stand out from its background?

Struggling with color styling within link_to tags in Rails 4 - having trouble getting inline styling to show up correctly

Choosing a sibling element before another using CSS

Cannot locate the index for removal of element in the array

Enhance User Experience by Making Each Background Slideshow Image Clickable