HTML table's horizontal width does not match the header's size

I'm having an issue with my HTML table. The rows are not aligning properly with the header width. Can anyone help with fixing this? I'm not very familiar with CSS, so any guidance would be greatly appreciated.

Here is an example of the HTML source code I'm working with:

<!doctype html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <link rel="icon" href="ressources/favicon.ico" />
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" href="ressources/style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css" integrity="sha384-mKB41Eu6sQQvXR8fqvXcVe8SXodkH6cYtVvHkvLwE7Nq0R/+coO4yJispNYKy9iZ" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e1918e91918493cf8b92a1d0cfd0d7cfd1">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>

<body>


    
      <div class="container">
      <table class="table table-responsive">
      <thead>
      <tr>
        <th>Type</th>
        <th>€/GO</th>
        <th>L/GO</th>
        <th>€/Value</th>
        <th>L/Value</th>
      </tr>
      </thead>

      <tbody style="height:150px;  width: 100%;  display:block;overflow-y:auto">
      <tr style="color:orange;">
        <th scope="row">DKV</th>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        </tr>
        <tr style="color:orange;">
        <th scope="row">DKV</th>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        </tr>
        <tr style="color:blue;">
        <th scope="row">GR</th>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        </tr>
        <tr style="color:orange;">
        <th scope="row">DKV</th>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        </tr>
        <tr style="color:orange;">
        <th scope="row">DKV</th>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
        </tr>
        <tr style="color:blue;">
        <th scope="row">GR</th>
        <td>400</td>
        <td>200</td>
        <td>50</td>
        <td>120</td>
        </tr>
        <tr style="color:orange;">
        <th scope="row">DKV</th>
        <td>100</td>
        <td>50</td>
        <td>10</td>
        <td>20</td>
        </tr>
        <tr style="color:orange;">
        <th scope="row">DKV</th>
        <td>111</td>
        <td>1</td>
        <td>22</td>
        <td>222</td>
        </tr>
        
      </tbody>
      </table>
      </div>
      </body>
</html>

Any assistance you can provide would be greatly appreciated! If possible, could you create a JSFiddle example or provide a snippet of code that could help me address this issue?

htmlcsshtml-table

Answer №1

Give this a shot and tell me if it makes a difference.

<style>
 th, td , tr{
    width:100px;
}

</style>

Answer №2

Get rid of the display-block attribute within the <tbody> element, specifically the style [display: block]

Answer №3

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>    <!doctype html>
    <html lang="fr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="">
        <link rel="icon" href="ressources/favicon.ico" />
        <!-- Bootstrap core CSS -->
        <link rel="stylesheet" href="ressources/style.css">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css" integrity="sha384-mKB41Eu6sQQvXR8fqvXcVe8SXodkH6cYtVvHkvLwE7Nq0R/+coO4yJispNYKy9iZ" crossorigin="anonymous">
        <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7e0e110e0e1b0c50140d3e4f504f48504e">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
    </head>
<style>
 th, td , tr{
    width:100px;
}

</style>
    <body>


        
          <div class="container">
          <table class="table table-responsive">
          <thead>
          <tr>
            <th>Type</th>
            <th>€/GO</th>
            <th>L/GO</th>
            <th>€/Value</th>
            <th>L/Value</th>
          </tr>
          </thead>

          <tbody style="height:150px;  width: 100%;  display:block;overflow-y:auto">
          <tr style="color:orange;">
            <th scope="row">DKV</th>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            </tr>
            <tr style="color:orange;">
            <th scope="row">DKV</th>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            </tr>
            <tr style="color:blue;">
            <th scope="row">GR</th>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            </tr>
            <tr style="color:orange;">
            <th scope="row">DKV</th>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            </tr>
            <tr style="color:orange;">
            <th scope="row">DKV</th>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            <td>0</td>
            </tr>
            <tr style="color:blue;">
            <th scope="row">GR</th>
            <td>400</td>
            <td>200</td>
            <td>50</td>
            <td>120</td>
            </tr>
            <tr style="color:orange;">
            <th scope="row">DKV</th>
            <td>100</td>
            <td>50</td>
            <td>10</td>
            <td>20</td>
            </tr>
            <tr style="color:orange;">
            <th scope="row">DKV</th>
            <td>111</td>
            <td>1</td>
            <td>22</td>
            <td>222</td>
            </tr>
            
          </tbody>
          </table>
          </div>
          </body>
    </html>

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

Assigning a class to a header upon loading the page from various sections at random

After scrolling, I used JavaScript to add a class to <header>. Here is the code snippet: $(window).scroll(function(){ var top = $(window).scrollTop(); if(top>=1){ $("header").addClass('bg-header'); } else ...

javascriptjquerycss

Activate JavaScript functions by pressing the enter key, allowing for various searches, AJAX requests, and DataTable displays to occur seamlessly without the need to refresh

I recently developed a web page that integrates an AWS API interface to interact with an RDS Aurora MySQL Serverless database. Users can input a SQL statement and click the Query button, which triggers an AJAX request, returns JSON data, and converts the d ...

javascriptjqueryhtmlajaxdatatables

Modify the background hue of the checkbox to resemble a button when selected

Is there a way to create a checkbox that resembles a button in appearance? I have managed to achieve this, but I am facing an issue with changing the background color of the button when it is checked. Currently, the button turns light-grey when checked, bu ...

htmlcssbuttoncheckbox

Transfer the values selected from checkboxes into an HTML input field

I am attempting to capture the values of checkboxes and then insert them into an input field once they have been checked. Using JavaScript, I have managed to show these values in a <span> tag successfully. However, when trying to do the same within a ...

javascriptjqueryhtml

Error Encountered in jQuery UI SelectMenu

Struggling to integrate the jQuery UI SelectMenu, I keep encountering the same error in the browser console. Below is the HTML Code: <select name="files" id="files"> <optgroup label="Scripts"> <option value="jquery">jQuery.js</ ...

javascriptjqueryhtmljquery-ui

Issues with HTML structure across various devices

Being a novice in web development, I've been experimenting with creating a modal body. https://i.sstatic.net/Qk5BR.png The code snippet below represents my attempt at structuring the modal body: <div className="row modalRowMargin textStyle" > ...

javascripthtmlcssbootstrap-4

Arranging a Table with unconventional column headings using a hash map in Java

As a newcomer in the world of Java, I have been able to successfully set up a table with regular headers using a hash map. However, I now face the challenge of setting irregular headers in the table by grouping multiple columns under one main heading. //~ ...

javahtmlhashmap

The orientation of the displayed images has turned vertical, breaking away from the traditional horizontal

My problem lies in trying to horizontally display the images fetched from the database. I attempted using "inline-block" but it proved ineffective. Despite looking for alternative solutions, none seemed to be a fit for my situation. $db = mysqli_connect(" ...

phphtmlcss

Embed a local page into an HTML file using PhoneGap

I attempted to load a page within my phonegap application using Jquery .load(), but it isn't functioning because it's on a local machine rather than a server. When I eventually upload the app to PhoneGap Build, my page will still be located in th ...

javascriptjqueryhtmlajaxcordova

Getting the dimensions of an image using a path in JavaScript

I am trying to display a div with an image, its name, size, and download link using jQuery. Here is the code I have created: var image = 'image/example.png' $('#download').attr("href", result2); $('.image').attr("src", re ...

javascriptjqueryhtmlimage

Adjustment of Image Placement

I'm describing my desired outcome briefly - I want the inputs in the code to appear in the top left corner of a large image. Despite trying multiple approaches, I have been unable to achieve this layout. When considering 2 columns, the inputs should b ...

htmlcsscss-position

Ways to remove all HTML elements from a string

Check out the code that I currently have: I am looking for a way to prevent users from entering any HTML tags in the "Add Responsibilities" field. For example, if a user enters the following: <div>Test</div> It should only display the text l ...

javascriptjqueryhtml

The unresponsive sticky navigation bar on a Joomla website is causing issues

I recently launched a new website that can be found here. The site includes the following JavaScript code: $(document).ready(function(){ $(window).bind('scroll', function() { var navHeight = $( window ).height() - 70; ...

javascriptcssjoomlamenusticky

What are the steps to start a ExpressJS server for webpages that are not index.html?

I am exploring how to browse/run/view web pages other than just the index.html file in my public folder, which contains multiple HTML files. I am using ExpressJS and NodeJS for this purpose, but every time I start my server, I can only access the index.htm ...

javascripthtmlnode.jsexpressbackend

Even after being removed, the input field in Firefox stubbornly maintains a red border

I have a project in progress that requires users to input data on a modal view and save it. The validation process highlights any errors with the following CSS snippet: .erroreEvidenziato { border: 1px solid red; } Here is the HTML code for the moda ...

javascriptjqueryhtmlcssfirefox

Configuring ng-options with personalized indices

I am a beginner learning AngularJS and I'm working on setting up ng-options with unique indexes. In my tables, I want to use the Primary Key as the index. For example, if the Primary Keys are 1, 3, 4, 5, I only want those indexes in my select. First ...

htmlangularjsselectng-options

Experiencing difficulties with the alignment of Bootstrap columns

I'm encountering an issue with displaying 3 Bootstrap columns in the ContentArea. Even though I can locate them using Developer tools, they seem to be positioned at the bottom of the ContentArea, making them not visible. I've attempted adjusting ...

csstwitter-bootstrapbootstrap-4

Trouble with image size transition not functioning properly

When attempting to enlarge an image with a transition in Chrome, it doesn't seem to be working properly. Here is the HTML code: <img src="foobar.png"> And the CSS code: img { float: left; margin-right ...

csscss-transitions

Is there a way to direct to a particular section of an external website without relying on an id attribute in the anchor tag?

I am aware that you can link to specific id attributes by using the following code: <a href="http://www.external-website.com/page#some-id">Link</a> However, what if the external HTML document does not have any ids to target? It seems odd tha ...

javascripthtmlwebdombrowser

The JavaScript function is not being activated by clicking on Selenium in Chrome

Take a look at the HTML snippet below: <table class="table-main "> <thead> <tbody> <!----> <tr class="" ng-if="mapCtrl.isAdded" style=""> <td/> <td> <td> <t ...

javascripthtmlangularjsselenium