-
tracyalexanderAsked on March 11, 2016 at 2:06 PM
-
CharlieReplied on March 11, 2016 at 2:54 PM
Hi,
See if this one gives you a better layout:
tr {
display: block;
width: 800px !important;
height: 110px !important;
}
td.col4 {
display: block;
position: relative;
top: 20px !important;
}
td.col5 {
display: block;
position: relative;
top: -18px !important;
left: 70px !important;
}
td.col6 {
display: block;
position: relative;
top: -56px !important;
left: 170px !important;
}
td.col7.buttonsColumn {
display: block;
position: relative;
top: -56px !important;
left: 370px !important;
}
#list > tbody > tr:nth-child(1), th {
display: none;
}
.col1:before, .col2:before, .col3:before, .col4:before, .col5:before, .col5:before, .col6:before, .col7:before {
font-weight: bold;
}
td.col1:before {
content: "Class No";
display: block;
}
td.col2:before {
content: "Name of Animal";
display: block;
}
td.col3:before {
content: "Tag No";
display: block;
}
td.col4:before {
content: "AI";
display: block;
}
td.col5:before {
content: "AI Class";
display: block;
}
td.col6:before {
content: "Name of Sire (If In AI Section)";
display: block;
}
button.add {
position: relative;
top: 10px !important;
}
That should give you a proper layout of the fields in two lines and gives you a bold heading.
This is how it looks like:
Let us know if that works.