We Keep Coding

dropdown list inside a table goes under columns

I have a table in which a sticky column contains dropdown list. my problem is dropdown list goes under the column in next row onwards can anyone help me
I have two columns position sticky because i don't want them to moved while scrolling.In one fixed column I have a dropdown list while I'm clicking on dropdown it goes under the sticky element
below is the code can someone help me
I tried adding z-index but it seems not working

remove the right declarations from these 2 sections:
.fixedit{
position: sticky;
width: 10px;
}
.fixactivate{
position: sticky;
}
Also changing your white space to nowrap might help too in this section
.hex-table-scroll .hex-table tbody tr td {
word-wrap: break-word;
word-break: break-all;
white-space: nowrap;
}

Pure CSS fixed table header?

I'm using Semantic UI for the CSS base. Here's a fiddle I've been working on.
I'm having trouble getting the existing answers working from googling around. They all seem to have this problem where there is a ton of whitespace to the right.
I'm trying to get it working such that it integrates nicely with the existing CSS of semantic UI to look good (no whitespace to the side), but I'm not having any luck and I've been at it for a while.
It's fine if this only works with newer browsers since I'll be using electron anyway.
This CSS looks like it's required but I'm not sure how to modify it to work properly with what I have:
tbody, thead tr { display: block; }
tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}

The source of the whitespace problem seems to be the ui class. It has several media queries on it that cause the content to re-flow at smaller screen sizes. If you look at the media query it doesn't apply if you add the class stackable to your table like below.
<table class="ui striped table unstackable">
Also, you only have 4 columns, seems like you want 5. Make the following change.
tbody td, thead th {
width: 140px !important;
}
thead th:last-child, tbody tr td:last-child{
width: 296px !important; /* 140px + 16px scrollbar width */
}
Working fiddle here

div popup display under table borders

I build bootstrap table with chosen jquery popup inside and I set the table to be x-scrollable when the table viewed on max-width:512px media query to:
#media (max-width:512px){
table {
overflow-x: auto;
overflow-y: hidden;
display: block;
white-space: nowrap;
}
}
so the table keeps the width and just scroll horizontally.
The problem i'm facing, when the view with width more than the media queries limits the popup, which I built using chosen jquery plugin, it displays correctly but when the view gets smaller width the popup appears under the borders of the table, I tried all the positions and displays in css but no luck.
you can view the table: http://plnkr.co/edit/rQmrAwjQO0tg1SH2CIko?p=preview
To see the problem re-size the preview to smaller width until you see the horizontal scroller.
I want to make the popup display above the table.
Please Advice,

CSS - How to horizontally center table whos position is absolute

I have a 5 html pages with the same code. Say this is the code:
<div id='generic'>
</div>
all the 5 pages link to the same external CSS file which is just this:
<style>
#generic {
width: 700px;
height: 500px;
}
</style>
On each of the 5 pages, I inserted a table, like so
<div id='bottomBar'>
<table id='bottomTable'>
<tr id='bottomTr'>
</tr>
</table>
</div>
The table has only one row. In the one row, I need to pick a random number from 1-10, and that is how many td's the row is going to have. So the first html page can have 2 td's, the second can have 6td's, etc. I need to make it so that the vertical position of the table is the same throughout all pages but the table must be horizontally aligned. I have to use position absolute since other users might type a few paragraphs before the table on some pages, and on some pages, there might not be any additional paragraphs so in order for me to have the same vertical position of the table, I need position absolute. How do I make it so that every table is horizontally centered? By horizontally aligned, I mean that every table has an even amount of white space on the left And the right regardless of how many td's the table has.
margin: 0 auto;
doesn't work for me. Note that I am not using CSS3 and am using IE8.

margin: 0 auto wont work for absolute positioned elements. What you need to do is absolute position it in the middle. You accomplish this by moving it left 50%; and then adjusted the left margin to negative half of the elements width
#bottomTable {
position: absolute;
width: 700px;
left: 50%;
margin-left: -350px; /*Half the width of your element*/
}
this will center it in the middle of its parent
ps. make sure the parent containers position is set to relative
http://jsfiddle.net/s7Gmm/3/

Set responsive div height to equal its sibling

I have two divs whose widths are controlled by percentages. I want the right div to be exactly as tall as the left div, which expands and shrinks based on the width of the image it contains and the width of the browser window.
Is there a way to accomplish this without javascript?
http://jsfiddle.net/5JU2t/

The simplest way to achieve this is to make the .right div absolutely positioned and setting top and bottom to 0.
Just remember to position the parent (.main) div relatively and remove all of the floats:
.right {
bottom:0;
position: absolute;
right:0;
top: 0;
}
.main {
position: relative;
}
Working example: http://jsfiddle.net/5JU2t/1/
Note
The reason the right column is a little longer in the example is due to the white space added under an image. Should you only be using an image in this column then you can add float: left to the image to resolve this:
Working example: http://jsfiddle.net/5JU2t/2/

I'd try wrapping it in a third div and give your two divs either height:auto or height: 100%.

Set the parent (.main) to display as table
and set the children (.right, .left) to display as table cell.

I would say funk all the extra css and use a table layout