Changing bootstrap-select element width and removing borders

Question

I have successfully created css files for vanilla Bootstrap, selectize, etc. But now I am having tough times trying to modify default css for Bootstrap-select. Specifically, I am trying to

1. Remove the border of the element
2. Change the width of the element so that it fits into the column with given width

As for now, the second column for some reason overlaps the first column. This error goes away if you remove the th.zeon-fixed-narrow-column {width: 1.5em;}. The think is that I don't want to remove it, I DO WANT the first column to be as narrow as 1.5em !

Here's my jsFiddle

table {
    table-layout: fixed;
}

th.zeon-fixed-narrow-column {
	width: 1.5em;
}

.zeon-selectpicker{
   border:none !important;
   width: 1.5em;
}

.zeon-selectpicker:focus{
    background-color:red;
}

table {
    table-layout: fixed;
}

th.zeon-fixed-narrow-column {
	width: 1.5em;
}

.zeon-selectpicker{
   border:none !important;
   width: 1.5em;
}

.zeon-selectpicker:focus{
    background-color:red;
}

Answer 1

If I understand you correctly. You want the width of the dropdown to be equal to your table header right?

To achieve this add this to your css:

.bootstrap-select:not([class*="span"]):not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){
  width:100%;
}

on default the above bootstrap-select class has a fixed width of 220px. You can see the result here: JSFIDDLE.

If this is not what you want please tell me, I will try to help you