A guide to adjusting the width without affecting the td element

Currently, I am facing a challenge while coding in HTML. I am trying to create a table with a header (time range) that fits on a single line without affecting the width of the td elements. Below is the code snippet:

<table style="border:1px solid #8c8c8c;width:100%;border-collapse:collapse;margin-bottom:1.5em">
  <thead>
    <tr style="border-bottom:1px solid black;background-color:#e9e9e9;font-size:16px">
      <th width="24%">
        <div style="width:auto">10:35PM - 11:05PM (30 MIN)</div>
      </th>
      <th style="text-align:right;padding-right:1em;" height="40px;">John Williams</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td valign="baseline" style="width:15%;padding-left:0.5em;">
        <div style="line-height:2em;font-weight:bold"> Topic:</div>
      </td>
      <td valign="baseline">
        <div>Resume Review</div>
      </td>
    </tr>
    <tr>
      <td valign="baseline" style="width:15%;padding-left:0.5em">
        <div style="line-height:2em;font-weight:bold">Phone:</div>
      </td>
      <td valign="baseline">123445567</td>
    </tr>
    <tr>
      <td valign="baseline" style="width:15%;padding-left:0.5em">
        <div style="line-height:2em;font-weight:bold">Email:</div>
      </td>
      <td valign="baseline"><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d475849545f42495f444a58485738353e4d4a444b405845232e2220">[email protected]</a>" target="_blank"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6e24491510151456213c36383c25294b262a28">[email protected]</a></a></td>
    </tr>
    <tr>
      <td valign="baseline">
        <div style="line-height:2em;width:auto;font-weight:bold">Student notes:</div>
      </td>
      <td valign="baseline"> some junk test text</td>
    </tr>
  </tbody>
</table>

Note: It is essential to resolve this issue without the use of an external CSS file. Any suggestions on how to approach this?

htmlcss

Answer №1

If you want the first cells to have different widths, they must span different numbers of columns; otherwise, they will only fill one column.

For example, if you have a 2-column table, you can use the `colspan` attribute to turn it into a 3-column table.

In the `thead` section, you can achieve this by using `th 24% use space left `, creating 3 columns with the first cell spanning through 2 columns.

Similarly, in the `tbody` section, `15% space left` will also create 3 columns.

The second column will be 24% - 15% = 9%, which will be utilized by the cell that spans through 2 columns.

This is the theory in action: 

<table style="border:1px solid #8c8c8c;width:100%; border-collapse:collapse;margin-bottom:1.5em">
  <thead>
    <tr style="border-bottom:1px solid black;background-color:#e9e9e9;font-size:16px">
      <th width="24%" colspan="2">
        <div style="width:auto">10:35PM - 11:05PM (30 MIN)</div>
      </th>
      <th style="text-align:right;padding-right:1em;margin-right:1em;" height="40px;">John Williams</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td valign="baseline" style="width:15%; padding-left:0.5em;">
        <div style="line-height:2em;font-weight:bold"> Topic:</div>
      </td>
      <td valign="baseline" colspan="2">
        <div>Resume Review</div>
      </td>
    </tr>
    <tr>
      <td valign="baseline" style="width:15%; padding-left:0.5em">
        <div style="line-height:2em;font-weight:bold">Phone:</div>
      </td>
      <td valign="baseline" colspan="2">123445567</td>
    </tr>
    <tr>
      <td valign="baseline" style="width:15%;padding-left:0.5em">
        <div style="line-height:2em;font-weight:bold">Email:</div>
      </td>
      <td valign="baseline" colspan="2"><a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="652f30213c372a21372c2230203f505d56252228242c294b262a28">[email protected]</a>" target="_blank"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2b617c424747424a6b6c666a626705686466">[email protected]</a></a></td>
    </tr>
    <tr>
      <td valign="baseline">
        <div style="line-height:2em;width:auto;font-weight:bold">Student notes:</div>
      </td>
      <td valign="baseline" colspan="2"> some junk test text</td>
    </tr>
  </tbody>
</table>

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

Differences in line spacing can be observed between the INPUT and LABEL elements

What could be causing this unusual behavior when setting line-height to match font-size: While the height of label is 16px, the height of input is 18px... Why is that? If I adjust line-height: 18px or higher, the heights suddenly align. But why does this ...

htmlcss

Need to convert an HTML table to JSON format? Visit convertjson.com/html-table-to-json.htm to easily convert your HTML table

Can anyone help me with converting HTML table data to JSON? I found a website that does something similar: I have tried some solutions but encountered issues at the end. I just need a JSON output to convert it into an array and continue with my project. ...

phphtmljsonruby

I am looking to implement user authentication using firebase, however, the sign-in page is currently allowing invalid inputs

<script> function save_user() { const uid = document.getElementById('user_id'); const userpwd = document.getElementById('user_pwd'); const btnregister=document.getElementById('btn-acti ...

htmlcssfirebase

Exploring the World of Images with Javascript

I'm currently working on creating a slideshow using HTML and JavaScript. My goal is to have the image change each time I press a button that I've established (see code below). After reviewing my code multiple times, I still can't figure out ...

javascripthtml

React JS - Large image failing to display entirely

I'm currently facing challenges with displaying my image in full size. I am unsure what is causing this issue and would appreciate any guidance on correcting my approach. The specific image I am attempting to display at full-size can be found Howeve ...

cssreactjs

What is causing the breakdown of bordered tables in Bootstrap when the border-separate property is set to collapse?

I am experiencing an issue with my bordered table that is using the Bootstrap classes table table-bordered. When I add border-collapse: separate, the borders are correctly separated, but the top and bottom borders seem to disappear due to zero width. I am ...

csstwitter-bootstrapbootstrap-5

What is the process for storing a list group in an SQL database?

Having a code snippet in html which populates a list with data selected from a combo box upon clicking the 'add' button. However, running into an issue where "undefined index: subjectlist" error occurs when submitting the form. Seeking advice on ...

javascriptphphtmllist

What is the best way to apply the CssClass "active" when clicking on a link

How can we update the cssClass of a link button on each click event, considering that the page refreshes every time? Currently, when I click on any LinkButton, the default behavior sets the cssClass to Plus LinkButton. ---index.aspx----------- <ul cl ...

javascriptasp.netcssvb.net

PHP: Establishing SESSION Variables

On Page1.php, there is a variable called "flag" with the value of 1. When clicked, it triggers the JavaScript function named "ajaxreq()" which will display the text "Click me" from an AJAX request originating from page2.php. If you click on the "Click me" ...

phpjavascriptjqueryhtmlajax

Troubleshooting: Issue with fixed positioning in React (Next.js) causing problems with modal window functionality

I'm currently working on implementing a modal window in React, but I've encountered an issue where setting position: fixed results in the modal window's position being relative to the page rather than the browser window. For privacy reasons, ...

javascripthtmlcssreactjsnext.js

React.js Material UI Dropdown Component

Is it possible to modify the behavior of the dropdown in Material UI Select? I would like to customize the appearance of <ul> so that it does not resemble a pop-up. My goal is for the selected item to be contained within the <li> element, simi ...

htmlcssreactjsmaterial-ui

Maintain the background div while scrolling horizontally

I am facing an issue with my wide bar chart where I use iScroll to enable horizontal scrolling. Behind the bar chart, there are horizontal lines that should move along in the background as the user scrolls horizontally. The challenge is to keep the lines v ...

htmlcss

Error in Reactive Form: Null Property Reading Issue

Issue: Encountered a Cannot read property errors of null error in the form group. I have implemented a reactive form with validation, but I keep running into this specific error. Here is the complete form control setup: <div class="container mt- ...

htmlangularangular-reactive-forms

Distinguishing between a video or image when uploading files in JavaScript

I've been researching whether JavaScript can determine if a file is a video or an image. However, most of the information I found only shows how to accept these types using the input tag. What I really need is for JS to identify the file type and the ...

javascripthtmljquerycss

The upper border is missing from the middle div in the presence of three divs

I am currently working on a new project using HTML, CSS, and Bootstrap. However, I have encountered a problem. I have created a box with a border all around it, and when I hover over this box, an image appears inside of it. By default, the inside of the bo ...

htmlcssbootstrap-5

Unable to adjust the size of the font within a text field component in Material UI

I'm currently delving into learning Material UI and am faced with the task of enlarging the text field on my webpage. Despite embedding styles along with the field, the height, width, and other properties change except for the size. Here's the sn ...

cssreactjsmaterial-ui

Persistent header feature in AdminLTE 3: Easily navigate while scrolling

I am looking to make the elements in the red box on the left side of the page fixed so that as users scroll, they remain at the top of the page. I have attempted to use both the fixed and sticky properties, but neither seem to be working for me. Here is a ...

cssbootstrap-4adminlte

Guide on applying a filter to the items in a listbox using the input from a text box

In my HTML form, I have the following elements: 1) A list box containing filenames: s1.txt2013 s2.txt2013 s3.txt2012 s4.txt2012 2) A text box where the user enters a pattern (e.g. 2013) 3) A button By default, the list box contains the 4 file ...

javascripthtml

Tips for Making Your Popup Window Stand Out

Looking to design a unique pop-up window featuring three tree-style radio buttons and a single submit button. Upon selecting one of the radio buttons, the chosen value should be recorded in the parent window. ...

javascriptjqueryhtml

What is the best way to determine the width of a CSS-styled div element?

Is there a way to retrieve the width of a div element that is specified by the developer? For example, using $('body').width() in jQuery will provide the width in pixels, even if it was not explicitly set. I specifically need to access the width ...

javascriptjqueryhtml