JQuery - Dynamically created element css not working

Question

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...

score 3 · Accepted Answer · answered Mar 26 '15 at 16:45

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.

score 2 · Answer 2 · edited May 23 '17 at 11:50

2

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>.

edited May 23 '17 at 11:50

Community

answered Mar 26 '15 at 16:40

Danijel

score 0 · Answer 3 · answered Mar 26 '15 at 16:47

0

set the width of the column heading instead

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

answered Mar 26 '15 at 16:47

Omer Bokhari

3 Answers3