CODEWITHSUNDEEP
javascriptjqueryhtmlcss
SiVi
SiVi

Reputation: 177

JQuery - Dynamically created element css not working

I have created a table dynamically using JQuery. But I cant able to apply css for the created table column. Here the sample link in codepen codepen.

I want set width:100px for 1st column. Plese help me in this. Thanks in advance...

Upvotes: 1

Views: 939

Answers (3)

Omer Bokhari
Omer Bokhari

Reputation: 59578

set the width of the column heading instead

#patientApptTable th:first-child{
    width: 100px !important;
}

http://codepen.io/anon/pen/bNzXeE

Upvotes: 0

jfplataroti
jfplataroti

Reputation: 661

actually you can modify the way that you are defining the width of the columns, like:

td.time-cell{
  width: 100px;
  min-width: 100px;
}
td.drop{
  width: 100%;
}

in this way you can ensure that the first column is only 100px and the other one will expand.

http://codepen.io/anon/pen/vEboLP

Upvotes: 3

Danijel
Danijel

Reputation: 12689

Remove #patientApptTable width:100%;

#patientApptTable {
  border-spacing: 0;
  width:100%; // remove this line
  border-collapse:collapse;
}

Also, it is not valid to insert <div> into <tr>.

Upvotes: 2

Related Questions