What could be causing the width of a table row (tr) in a table element to not function properly, while the height is functioning as expected?

My code is as follows: 

.table1 {
  background-color: gray;
  display: flex;
  justify-content: ;
  align-items: ;
  height: 400px;
  margin-left: 40px;
  padding-left: ;
}

.table1 tr {
  background-color: blue;
  height: 50px;
  width: 50px;
}
<table class="table1">

  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>

  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>

  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>

</table>

I am having trouble changing the width of the "TR" element, but not the height. Why does this happen? I know that adjusting the width through padding in the parent block works, but why doesn't it work when directly modifying the TR elements like with the height?

htmlcss

Answer №1

Attempt applying flex on tbody with flex-direction: column like this:

.table1 tbody {
  background-color: gray;
  display: flex;
  justify-content: ;
  align-items: ;
  height: 400px;
  margin-left: 40px;
  padding-left: ;
  flex-direction: column;
}

.table1 tr {
  background-color: blue;
  height: 50px;
}
.table1 tr td, .table1 tr th {
  width: 150px;
  text-align: left;
}
<table class="table1">

  <tr>
    <th>First Name</th>
    <th>Last Name</th>
    <th>Age</th>
  </tr>

  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>

  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>

</table>

Please be aware that I have also included a width for both td and th.

Answer №2

Like mentioned earlier, a tr will always fill the width of the table, while its height can be adjusted accordingly. This explains why adjusting the height attribute in your code works, but not the width attribute.

If you want to customize the widths of your columns, simply target the th element. Adding the following code to your CSS stylesheet will alter the column widths:

th {
  width:50px;
}

For more specific targeting, you can use this code instead:

.table1 tr th {
  width:50px;
}

You also have the flexibility to set different widths for each column. For instance, your First Name column could be 100px and your Last Name column could be 150px. Keep in mind that the total width of all columns should not exceed the width of the table itself.

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

Stopping individuals from engaging in the act of spamming a picture upload form

I am currently developing an innovative Image hosting platform, and I am faced with a crucial challenge – how can I effectively prevent users from continuously refreshing the form, causing the image to be repeatedly uploaded until my disk space allocat ...

phphtmlcssimageupload

What is the technique for anchoring elements at the top of the page when scrolling?

There is a common design feature where the sidebar on the left starts at a lower position on the page, but as you scroll it moves up to the top and remains fixed in place instead of disappearing off the screen. This is a popular design trend that I have ...

javascriptjquerycsshtmlparallax

Fascinating CSS quandary: does the transparency of a parent element impact the transparency of a child element that is absolutely positioned, but not in relation

Check out this test case: https://jsbin.com/merujogudo/1/edit?html,css,output Should the element with .test class be transparent or not? Note: The current state is as follows: In Chrome and Firefox (latest versions): transparent In IE11: opaque It wou ...

cssstandards

What is the best way to bring the global stylesheet into a Vue component?

Embarking on my first VueJS project, I decided to create a global stylesheet to maintain consistent styles across different components. After installing the SCSS loader and setting up my stylesheets, I encountered an issue. $mainFont: 'PoppinsRegular, ...

javascriptcssvue.jssassvue-component

Is it possible to filter an array of data using a dropdown in Angular without using a pipe?

I am facing an issue with filtering data based on the selected dropdown item. Currently, it only filters the data once when I select a filter, and after that, it always returns an empty result. Here is an example of the code: <select class="select" (c ...

javascripthtmlangulardrop-down-menu

Submitting a Django POST request with an empty form in an HTML form

When I try to submit a simple HTML form, both request.body and request.POST are empty for some unknown reason. The HTML code for the form is as follows: <div id="signup"> <h1>Sign Up for Free</h1> <form action="/accounts ...

htmldjangoformsdjango-rest-framework

How to set the value of an `<input type="date"` in jQuery

Having trouble figuring out why this code isn't functioning properly. The input field I'm using is a simple 'input type="date"' setup like this.... <input type="date" name="Date"/> I am attempting to have the value automatically ...

javascriptjqueryhtmldate

Styling the scrollbar for the PDF element on an HTML page

I have a div that contains an object "linked" to a .pdf file. Is it possible to customize the scrollbar style using CSS or JavaScript/jQuery? <div id="container"> <object data="document.pdf" type="application/pdf" ...

javascriptjqueryhtmlcsspdf

Large button in Bootstrap 3 breaks out of Jumbotron on smaller mobile screens

I have set up my layout with a Jumbotron that features a prominent call-to-action button. <a href="#" class="btn btn-lg btn-success">Let's Purchase Something Elegant</a> However, when viewed on an XS mobile screen, the button extends bey ...

csstwitter-bootstraptwitter-bootstrap-3

Using JavaScript to interact with elements inside an iframe on a webpage

In a simple scenario, I am experiencing incorrect results. Code snippet from MyFrame.HTML: <!DOCTYPE html> <html> <head> <title>My Frame</title> </head> <body> <a href="https://www.google.com& ...

javascripthtmliframe

Creating a dynamic page footer for a PDF document using Rotativa's content generation capabilities

As I work on generating a PDF, my employer has requested that I add a footer to each page of the document. Currently, the PDF is being created using Rotativa, where an HTML page is converted into a PDF. However, I am facing a challenge in determining the ...

c#htmljquerycssrotativa

Creating personalized HTML logs

My automated test script is set up in a way that automatically generates an HTML log file upon completion. You can find instructions on how to do this here. Is there a possibility to customize this HTML log or create my own HTML logger to replace the defa ...

c#html.netvisual-studio-2012coded-ui-tests

"Client-side style not rendering correctly in Internet Explorer 8 when accessed through server in

I have noticed some strange behavior with my .net application. Everything appears fine when running it from Visual Studio on IE8: However, once I deploy the application to my server and access it via URL, it seems to lose its margin: It's puzzling t ...

html.netcssinternet-explorerinternet-explorer-8

After transitioning to TypeScript, the CRA app is encountering issues loading CSS files compiled by SASS

My React application was originally created using create-react-app and I had been successfully loading scss files with the node-sass package. However, after deciding to switch to TypeScript following the steps outlined in , my css files are no longer being ...

cssreactjstypescriptsass

What is the best way to position the sign-in modal form on the top right corner of my website?

Hey there, I'm facing a bit of an issue and can't seem to figure out what went wrong. Recently, I inserted a Bootstrap Sign In modal in my HTML file. Here's the code: <div class="text-center"> <a href="" class ...

htmlcssbootstrap-4layoutfrontend

creating a div element with a height that matches its content dimensions

I'm having trouble creating a navigation bar because the outer div isn't matching the height of the unordered list inside it. I attempted using display:inline-block as well, but it didn't solve the issue. Here is the HTML: http://jsfiddle ...

csshtml

Simple steps to add a click event listener to every element within a div

I need to assign a click handler to multiple elements and perform different actions based on which one is clicked. To illustrate, I can create an alert displaying the class of the button that was clicked. The elements I am working with have a similar str ...

javascripthtml

Pressing the up arrow in Javascript to retrieve the most recent inputs

Is there a way to retrieve the most recent inputs I entered in a specific order? For example: I have an array with 20 elements, and every time I enter something, I remove the first element from the array and add the new input at the end. So, when I press ...

javascripthtmljquerymemoryinput

React isn't updating the on-change value despite changes being made

In my React application, there is a file called EditTodos.js that is responsible for updating the to-do list. When I click on the "Edit" button, it triggers a pop-up modal component. import React, { useState } from "react"; import { Button, Modal } from " ...

javascripthtmlreactjsbootstrap-4

Is there a way to take a snapshot of an HTML Canvas frame and showcase it on a Bootstrap modal?

I have a page where users must grant permission for their webcam or camera. Once granted, a webmoji will move according to the user's face position. Below is a button that will turn blue and become active once a face is detected. When clicked, I want ...

javascripthtmlcsscanvasbootstrap-4