Drop-down menu in a table cell overflowing with lengthy text, causing the table to collapse

I'm facing an issue with my table where I have inputs and selects inside <td>. The problem arises when the text in the options of the <select> element is too long, causing the <td> to expand and disrupt the overall layout of the table. Typically, the length of the content inside td and th should be equal, with the minimum width of a td being the length of the largest word in th. Adjusting the width of td or th doesn't work as it only affects the select element. Since the content within the options is dynamic, using a static width is not ideal. How can I prevent the select from expanding the td and ensure that both have equal widths? Checkout this Plnkr example for reference.

htmlangularjscsssass

Answer №1

To ensure table elements expand based on their content, it is important to specify a width for them in your CSS. By updating your stylesheet as shown below, you can achieve the desired outcome:

table {
  width: 100%;
  border-collapse: collapse;
}
td {
  width: 25%;
}
td select {
  width: 100%;
}

Here is a sample code snippet illustrating the changes:

table th, table td {
  border:1px solid grey;
}
table {
  width: 100%;
  border-collapse: collapse;
}
td {
  width: 25%;
}
td select {
  width: 100%;
}
    <table>
      <thead>
        <tr>
          <th>Group Name</th>
          <th style='width:50px'>Members</th>
          <th>Genre</th>
          <th>From</th>
        </tr>
      </thead>
      
      <tbody>
        <tr>
          <td>
            <select>
              <option>Red Hot Chili Peppers</option>
              <option>Depeche Mode</option>
              <option>very-very-very long text, it will be crush the table</option>
            </select>
          </td>
          <td>
            <select>
              <option>4</option>
              <option>3</option>
              <option>very-very-very long text, it will be crush the table</option>
            </select>
          </td>
          <td>
            <select>
              <option>funk-rock/rock/alternative</option>
              <option>Synthpop/new-wave</option>
              <option>very-very-very long text, it will be crush the table</option>
            </select>
          </td>
          <td>
            <select>
              <option>USA</option>
              <option>UK</option>
              <option>very-very-very long text, it will be crush the table</option>
            </select>
          </td>
        </tr>
      </tbody>
    </table>

Answer №2

Don't forget to add width to the select element:

<select style="width:50px;"></select>

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

Switching out images in a responsive column grid on hover using JQuery

I'm currently troubleshooting my code and would appreciate any help with debugging. The main goal is to swap out the image within the ".col" element on mouseenter and revert back to the original image on mouseleave. Additionally, I'd like to prel ...

jqueryhtmlimagehoverimage-gallery

Position Bootstrap 5 modal footer elements to the left and right for an enhanced visual

Can anyone assist me with customizing the Bootstrap 5 modal footer? I am looking to align a text (either using span or label) to the left and a button to the right within the modal footer. I came across this solution and attempted to implement it by cha ...

htmlcssbootstrap-5bootstrap5-modal

Guide to designing a CSS gradient with a downward arrow linked to a specific container

I'm attempting to add a triangular arrow beneath the v-container, complete with a gradient color scheme. However, I'm struggling to integrate the gradient seamlessly. If I use CSS to create the arrow, the gradient doesn't align correctly. ...

htmlcssvuetify.js

Issue with ng-change in dropdown selection

It seems like this function isn't working properly and I can't figure out why. This is my view: <tr> <th>Category</th> <td> <select class="form-control" ng-model="masterlist.category_id" ng-options="c.c ...

angularjsasp.net-mvc-4angularjs-ng-change

angular - retrieve information from a server

I just started learning angularJS yesterday and I'm still trying to wrap my head around it. My attempt to retrieve data from a server using the curl command was successful: curl -i 175.36.8.90:5000/todo/api/v1.0/tasks (Please note that this is not ...

angularjscurlget

php redirecting form data

Being a beginner in PHP, I'm aiming to create a script that can direct me to a specific address based on the value of an input form. Is this the right approach? index.html <form action="process.php" method="post"> <input type="text" nam ...

phphtmlforms

What steps can be taken to automatically scroll to an element in a Protractor test when the element cannot be found within the view?

When running my suite of tests, I want Protractor to automatically scroll to elements on the page if it is unable to find them in the current view. Some recent UI changes resulted in a few end-to-end tests failing, as the headers were made fixed. Current ...

angularjsjasmineprotractorautomated-testsend-to-end

Attempting to align a navigation block next to an SVG image

On my website, I envisioned a photoshopped image featuring a SVG picture of a book on the left and a "navigation block" on the right. The navigation block consists of links that redirect to other pages but it's not displaying properly. You can view th ...

htmlcss

Difficulties in Configuring Testacular Integration with Jasmine and Angular

I'm in the process of setting up a unit testing environment for my project and encountering some difficulties. Specifically, I am attempting to utilize Testacular with Jasmine to test my AngularJS code. One of the challenges I am facing involves a mo ...

javascriptunit-testingangularjsjasminekarma-runner

How to dynamically add an HTML element following a specific div class in Typescript and Angular

Is there a way to dynamically insert a component into a div after a specific element with a designated class name using TypeScript? <div class ="{{order.orderId}}"> <div class="enter-here"></div> <other html elements here> < ...

htmlangulartypescript

Moving DOM Elements around

Objective: Looking to relocate an element within the DOM structure. Condition: Although I am familiar with using jQuery for this task, I am currently working in an environment without access to it. Therefore, I need a pure JavaScript solution. Example: ...

javascripthtml

Content is positioned to the left in a horizontal layout without a set width

I am currently assisting a friend with the development of her website. While I consider myself somewhat of an amateur in web design, I usually manage to overcome challenges by dedicating hours to searching for solutions online. However, this time I have no ...

htmlcss

Can we use Selenium to extract text from a webpage that is not present in the HTML but is instead fetched from an API response?

There is text in the text field, but the HTML isn't displaying it. Check out the Text field with HTML. Can Selenium extract the text "test" if it is retrieved from an API? ...

javahtmlapiselenium-webdrivertextfield

Arranging particular placement

How can I position my links to the right of the second photo (opus1) and slightly below the first photo (coverPhoto)? I've tried various methods but haven't found a simple solution yet. <!DOCTYPE html> <html lang="en"> <head ...

htmlcss

Refreshing a div using ajax technology

I am attempting to use Ajax to update an h3 element with the id data. The Ajax call is making a get request to fetch data from an API, but for some reason, the HTML content is not getting updated. This is how the JSON data looks: {ticker: "TEST", Price: 7 ...

javascriptjqueryhtmlajax

Is it necessary to treat headings within figure elements as document headings?

Imagine a scenario where we are working with a page structured like this: <!DOCTYPE HTML><HTML><BODY> <ARTICLE> <H1>Heading Example</H1> <P>Here is what a heading (level 2) looks like:</P> <FIG ...

htmlfigurehtml-heading

Achieve vertical center alignment of text without using line height or table cells

Looking to add a "toggle" animation on my Teaser, here's the code: .ax { height:60px; width:150px; background:gold; } .caption { position: absolute; left:0; top: 35%; overflow: hidden; right: 0; background-colo ...

cssvertical-alignment

Automatically adjust the width of elements based on the number of items in an ng-repeat

I am completely new to working with AngularJS 1.4.x. <div class="colContainer" ng-repeat="item in betNumber" ng-style="{width:{{rowWidth(item.length)}} +'px'}"> Whenever I press the AddNumber ball and add more than 13, I would really like ...

angularjsangularjs-ng-repeatng-style

Center 3 elements horizontally using Flexbox, ensuring the center element is aligned properly

Is it possible to center 3 elements using flexbox on a page? The middle element should be centered on the page, while the left and right elements can vary in width. Please refer to the image below: https://i.sstatic.net/IVdz8.png I am not certain if this ...

cssflexbox

Aligning a sprite at the center of a div background

My button has a unique design where it consists of a sprite set as the background image of a div. The sprite sheet is laid out horizontally, and I have also scaled down the source image to fit the div. .button { background: url(sprite.png); backgr ...

cssspritecss-spritessprite-sheet