Allow the table headers to be flexible and accommodate extended names in the rows

<div class="container">
  <div class="table-responsive">          
    <table class="table" width="100%" >
      <thead>
        <tr>        
           <th class= "style6"  >Year</th>
           <th class="style6"   >Person of The Year</th>
           <th class="style6" >Citizen of the Year</th>              
           <th class="style6"  >Outstanding Service</th>              
           <th class="style6"  >Lifetime Achievement</th>              
           <th class="style6"  >International Category</th>              
           <th class="style6"  >Samantha Young Service Award</th>              
           <th class="style6" >Central Chapter Awards</th>              
           <th class="style6"  >Other Awards</th>              
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="style9">1973</td>
          <td class="style9">Charles Johnson</td>
          <td class="style9">James SMith and Issac Smith</td>
          <td class="style9">&nbsp;</td>

I am looking for a solution to accommodate long names in responsive tables without the information overflowing to the next line. Is there a way to adjust the table to expand based on the length of names in each row?

htmlcss

Answer №1

Simply include white-space: nowrap; in the td styling

td {
  white-space: nowrap;
  border: 1px solid grey;
  padding: 0.25em;
}

tr {
  text-align: center;
}
<div class="container">
  <div class="table-responsive">
    <table class="table" width="100%">
      <thead>
        <tr>
          <th class="style6">Year</th>
          <th class="style6">Person of The Year</th>
          <th class="style6">Citizen of the Year</th>
          <th class="style6">Outstanding Service</th>
          <th class="style6">Lifetime Achievement</th>
          <th class="style6">International Category</th>
          <th class="style6">Samantha Young Service Award</th>
          <th class="style6">Central Chapter Awards</th>
          <th class="style6">Other Awards</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="style9">1973</td>
          <td class="style9">Charles Johnson</td>
          <td class="style9">James SMith and Issac Smith</td>
          <td class="style9">&nbsp;</td>

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

Introducing a fresh new feature incorporating various div elements through the power of JQuery

Why am I unable to retrieve the text of the newly added child divs? I am using JQuery to dynamically add these elements. Here is my sample fiddle: JSFIDDLE Could someone please guide me on what mistake I made? Javascript Code: var counter = 0; $("butto ...

jquerycssajaxdynamicelement

Generate three separate inline blocks and position elements within them without any impact on the neighboring blocks

In my attempt to create three blocks with set height and width, aligned on top/bottom with a couple of elements inside each one, I encountered an issue. Whenever I add additional DIVs to one of the elements (resulting in a different number of DIVs inside e ...

htmlcsstwitter-bootstrapbootstrap-5

Loading content onto a webpage using AJAX

I am currently facing a challenge while attempting to incorporate a file on my server using AJAX. The issue I am encountering is that it disrupts the functionality of my PHP code. The AJAX is implemented on the following page: <div id="content&quo ...

javascriptphphtmljqueryajax

Stunning Opening and Closing Animation with Ajax

Looking for help with creating an animation like the one shown here: Incorporating this into my current site at: dageniusmarketer.com/DigitalWonderland/ I want the window displaying text content to open and close as users navigate through the links, ess ...

javascripthtmlajaxanimation

Creating a data visualization dashboard using Google Charts and organizing it in a responsive

I am integrating Google charts into a bootstrap theme. The Chart dashboard I am using has a specific structure: <div id="dashboard"> <div id="control1"></div> <div id="chart1"></div> </div> On the other ...

layouthtmltwitter-bootstrapgoogle-visualization

Modify the div's width from 100% to 1000 pixels when it is less than 1000 pixels, using Javascript

I need help with writing Javascript code that will change the width of a div element called "red" from 100% to 1000px when the browser width is less than 1000px. The code should revert the width back to 100% when the browser width is greater than 1000px. ...

javascriptcssresizegetelementbyid

Tips for successfully passing ExpressJS locals variable to an EJS template and utilizing it as a parameter when invoking a JavaScript function during the onload HTML event

const hostname = "192.168.8.154"; const port = 3002; app.use('*', function (req, res, next) { db.collection('sys_params').find().toArray() .then(sysParams => { //console.log(sysParams); app.locals.sysParams ...

javascripthtmlnode.jsexpressejs

Foundation: the importance of source order (without using flex grid)

I have a 3-column grid, with content and a sidebar. On small and medium devices each takes up 12 columns. Take a look at the example here: cdpn.io/anon/pen/bqENqG. I am looking to have the sidebar appear after the articles on small and medium devices like ...

htmlcsszurb-foundation

After a brief delay, I aim to eliminate a className or restart the class animation when a certain condition is satisfied

Objective: My goal is to create a feature where the price number highlights with a color for a brief moment when there is a price change using toggleClassName. Challenge: The issue arises when the iteration is UP UP or DOWN DOWN, as the element already ha ...

cssreactjs

Encountering an error in a Javascript function: Property 'style' is unreadable because it is undefined

When attempting to run this Javascript function, an error message appears stating, 'Cannot read property 'style' of undefined at showSlides' var slideIndex = 1; showSlides(slideIndex); // Next/previous controls function plusSlides(n) ...

javascripthtml

Troubleshooting issue with CSS `gap` property malfunctioning in conjunction with `display: block;` setting

I've run into an issue with the gap property in CSS not working as expected in my layout. After investigating, I found that some of my containers have display: block; set, which seems to be causing the gap property to be ineffective. My goal is to cre ...

htmlcssreactjs

Setting the width of an image within an iframe: A step-by-step guide

Is there a way to adjust the width of an image within an iframe? Typically, if an image with high resolution is placed inside an iframe, the iframe becomes scrollable by default. ...

javascriptjqueryhtmlcss

Unveiling the Technique: Adjusting Field Visibility When Dropdown is Altered

I tried to find a solution on Stackoverflow for displaying/hiding a field based on dropdown selection using either jQuery or inline JavaScript. However, I am facing difficulties when implementing this within a table. Let's start with an easy approach ...

javascriptjqueryhtmlcss

Arranging Elements Using CSS

Currently, I am working on aligning and positioning my items using CSS. However, I'm a bit confused about the right approach. Here is a demo of my current progress: Demo Link I aim to achieve a layout similar to this sketch: Sketch Image Apologies ...

jqueryhtmlcss

The plugin data containing 'data:application/pdf;base64,JVBERi0xLjQKJ**' was declined for loading. Content security policy cannot be configured

My approach to enforcing content security policy involves using the following code snippet: <meta charset="UTF-8" http-equiv="content-security-policy" content="object-src 'self' data:" /> However, when this i ...

htmlvue.jspdfvuejs3content-security-policy

Using @font-face to apply a font on an SVG file is not supported

I attempted to incorporate custom fonts into my SVG file, but unfortunately, my efforts were unsuccessful. While I have successfully implemented custom fonts on regular HTML/CSS webpages before, I encountered difficulties when trying to do the same with SV ...

htmlcsssvgfontsembed

Controlling the Quantity of Selected Checkboxes with JavaScript

I am facing an issue with implementing multiple checkboxes with limits in JavaScript, as shown below. $(".checkbox-limit").on('change', function(evt) { var limit = parseInt($(this).parent().data("limit")); if($(this).siblings(':checked&ap ...

javascripthtmlcheckboxlimit

Ways to retrieve only the chosen option when the dropdown menu features identical names

How can I retrieve only the selected value from the user, when there are multiple select options with the same class name due to dynamic data coming from a database? The goal is to submit the data using Ajax and have the user select one option at a time. ...

javascriptjqueryhtml

Having trouble finding an element within an HTML DOM that is nested inside an object tag using Selenium

I'm currently in the process of automating tests on an HTML page using Selenium in C#. The parent/outer HTML page has an object tag, within which there is another HTML page. Here's a snippet of how the sample HTML code looks: <!DOCTYPE html&g ...

c#htmlselenium

Arranging items to be flush at the base of several columns

I need help with positioning buttons at the bottom of three columns of text. I want them to be aligned vertically on the page when the columns are side-by-side, and then placed after each column when viewed in a single-column layout on small screens. The c ...

htmlcsspositioningmultiple-columns