2015-09-11 9 views
11

Rozwijam kod HTML używając tagu table i działa dobrze w każdej innej przeglądarce, takiej jak Safari, Firefox, IE itp., Ale kod nie działa dla chrome jako wynik wyniku jak wyświetlane w następującym załączonym obrazie. Wyświetlane: problemy z tablicą-tabelą w chrome przy dobrej pracy w innych przeglądarkach

.contfull { 
 
    max-height: 900px; 
 
} 
 
body { 
 
    background: #cbd0d4 none repeat scroll 0 0; 
 
    color: #444444; 
 
    font-size: 14px; 
 
    margin: 0; 
 
    min-width: 100% !important; 
 
    padding: 0; 
 
} 
 
.content { 
 
    margin: 0 auto; 
 
    width: 100%; 
 
} 
 
.container_q { 
 
    background: #f0efef none repeat scroll 0 0; 
 
    float: left; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.header_q { 
 
    background: #ffffff none repeat scroll 0 0; 
 
    box-shadow: 0 2px 2px #e0dcdc; 
 
    display: block; 
 
    padding: 10px 20px 4px; 
 
    position: relative; 
 
    z-index: 100; 
 
} 
 
.logo_q { 
 
    display: inline-block; 
 
} 
 
.logo_q a { 
 
    outline: medium none; 
 
} 
 
.contfull { 
 
    background: #f0efef none repeat scroll 0 0; 
 
    display: inline-block; 
 
    height: 100%; 
 
    overflow-y: scroll; 
 
    padding: 15px 2%; 
 
    position: fixed; 
 
    width: 60%; 
 
} 
 
.btncross { 
 
    float: right; 
 
} 
 
.btncross a { 
 
    background: #fff url("../imagesSurvey/cross-img.png") no-repeat scroll center center; 
 
    border-radius: 20px; 
 
    box-shadow: 0 0 1px 1px #f2f2f2; 
 
    display: inline-block; 
 
    height: 27px; 
 
    margin-right: 3px; 
 
    width: 27px; 
 
} 
 
.btncross a:hover { 
 
    background: #e5e5e5 url("../imagesSurvey/cross-img.png") no-repeat scroll center center; 
 
} 
 
.btncross a.min { 
 
    background-position: 5px 7px; 
 
} 
 
.btncross a.clobtn { 
 
    background-position: -17px 7px; 
 
} 
 
.redcol { 
 
    color: #ff0800; 
 
    font-size: 14px; 
 
    width: 10px; 
 
} 
 
a { 
 
    color: #444444; 
 
    text-decoration: none; 
 
} 
 
input[type="checkbox"]:not(old) { 
 
    float: left; 
 
    height: 28px; 
 
    margin: 0; 
 
    opacity: 0; 
 
    padding: 0; 
 
    width: 28px; 
 
} 
 
input[type="checkbox"]:checked:not(old) + label { 
 
    background-position: 0 -64px; 
 
} 
 
input[type="checkbox"]:not(old) + label { 
 
    background: rgba(0, 0, 0, 0) url("http://publish.adsys2.bonzaii.no/imagesSurvey/checks.png") no-repeat scroll 0 0; 
 
    display: block; 
 
    line-height: 24px; 
 
    margin-left: 5px; 
 
    padding-left: 34px; 
 
} 
 
input[type="text"] { 
 
    background: #efefef none repeat scroll 0 0; 
 
    border: 1px solid #ebebeb; 
 
    float: left; 
 
    height: 17px; 
 
    margin-top: 5px; 
 
    outline: medium none; 
 
    padding: 10px 0; 
 
    text-indent: 10px; 
 
    width: 99%; 
 
} 
 
textarea { 
 
    background: #efefef none repeat scroll 0 0; 
 
    border: 1px solid #ebebeb; 
 
    float: left; 
 
    font-size: 14px; 
 
    height: 70px; 
 
    outline: medium none; 
 
    overflow: auto; 
 
    padding: 10px 0; 
 
    text-indent: 10px; 
 
    width: 99.5%; 
 
} 
 
input[type="radio"]:not(old) { 
 
    float: left; 
 
    margin: 0; 
 
    opacity: 0; 
 
    padding: 0; 
 
    width: 28px; 
 
} 
 
input[type="radio"]:not(old) + label { 
 
    background: rgba(0, 0, 0, 0) url("http://publish.adsys2.bonzaii.no/imagesSurvey/checks.png") no-repeat scroll 0 -112px; 
 
    display: block; 
 
    line-height: 24px; 
 
    margin-left: 8px; 
 
    margin-top: 0; 
 
    min-height: 20px; 
 
    padding: 10px 0 10px 30px; 
 
} 
 
input[type="radio"]:checked:not(old) + label { 
 
    background-position: 0 -180px; 
 
} 
 
button { 
 
    background: #272727 none repeat scroll 0 0; 
 
    border: 1px solid #272727; 
 
    border-radius: 3px; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    float: right; 
 
    font-family: "gothammediumwebfont"; 
 
    font-size: 14px; 
 
    height: 38px; 
 
    line-height: 35px; 
 
    margin-top: 20px; 
 
    outline: medium none; 
 
    padding: 0 15px; 
 
    text-transform: none; 
 
} 
 
button:focus { 
 
    background: #2e2e2e none repeat scroll 0 0; 
 
    color: #fff; 
 
} 
 
button:hover { 
 
    background: #000000 none repeat scroll 0 0; 
 
    color: #fff; 
 
} 
 
a.nextbtn { 
 
    background: #272727 none repeat scroll 0 0; 
 
    border: 1px solid #272727; 
 
    border-radius: 3px; 
 
    color: #fff; 
 
    cursor: pointer; 
 
    float: right; 
 
    font-family: "gothammediumwebfont"; 
 
    font-size: 14px; 
 
    height: 36px; 
 
    line-height: 36px; 
 
    margin-top: 20px; 
 
    outline: medium none; 
 
    padding: 0 25px; 
 
    text-transform: none; 
 
} 
 
a.nextbtn:focus { 
 
    background: #2e2e2e none repeat scroll 0 0; 
 
    color: #fff; 
 
} 
 
a.nextbtn:hover { 
 
    background: #000000 none repeat scroll 0 0; 
 
    color: #fff; 
 
} 
 
a.skipbtn { 
 
    background: #fff none repeat scroll 0 0; 
 
    border: 1px solid #272727; 
 
    border-radius: 3px; 
 
    color: #444444; 
 
    cursor: pointer; 
 
    float: right; 
 
    font-family: "gothammediumwebfont"; 
 
    font-size: 14px; 
 
    height: 20px; 
 
    line-height: 20px; 
 
    margin-right: 10px; 
 
    margin-top: 20px; 
 
    outline: medium none; 
 
    padding: 8px 25px; 
 
    text-decoration: none; 
 
    text-transform: none; 
 
} 
 
a.skipbtn:hover { 
 
    border: 1px solid #000000; 
 
} 
 
select { 
 
    background: transparent none repeat scroll 0 0; 
 
    border: 1px solid #ebebeb; 
 
    border-radius: 0 !important; 
 
    font-family: "arial", sans-serif; 
 
    font-size: 14px; 
 
    height: 40px; 
 
    margin-top: 0; 
 
    outline: medium none; 
 
    padding: 0; 
 
    text-indent: 5px; 
 
    width: 100%; 
 
} 
 
label.pos { 
 
    background: #efefef none repeat scroll 0 0; 
 
    border: 1px solid #ebebeb; 
 
    float: left; 
 
    height: 17px; 
 
    margin-top: 4px; 
 
    overflow: hidden; 
 
    padding: 8px 0 12px; 
 
    position: relative; 
 
    width: 100%; 
 
} 
 
label.yearwise { 
 
    margin-right: 2%; 
 
    width: 18%; 
 
} 
 
label.pos::after { 
 
    background: rgba(0, 0, 0, 0) url("../imagesSurvey/arrow-top.png") no-repeat scroll 0 center; 
 
    border-left: 1px solid #e7e6e6; 
 
    color: #444; 
 
    font-family: "GothamBook"; 
 
    padding: 8px 14px 10px; 
 
    pointer-events: none; 
 
    position: absolute; 
 
    right: -1px; 
 
    top: 1px; 
 
} 
 
label.pos { 
 
    background: #efefef none repeat scroll 0 0; 
 
    border: 1px solid #ebebeb; 
 
    float: left; 
 
    height: 40px; 
 
    margin-top: 4px; 
 
    overflow: hidden; 
 
    padding: 0; 
 
    position: relative; 
 
    width: 99%; 
 
} 
 
label.pos::before { 
 
    background: #efefef url("../imagesSurvey/arrow-top.png") no-repeat scroll center center; 
 
    border-left: 1px solid #e4e4e4; 
 
    content: ""; 
 
    display: block; 
 
    height: 38px; 
 
    margin: 0; 
 
    pointer-events: none; 
 
    position: absolute; 
 
    right: 1px; 
 
    top: 1px; 
 
    width: 44px; 
 
} 
 
span.radiaspace { 
 
    float: left; 
 
    height: 100%; 
 
    padding: 0 2px; 
 
    width: 20px; 
 
} 
 
span { 
 
    float: left; 
 
    padding: 0 2px; 
 
} 
 
h1, 
 
h2, 
 
h3, 
 
h4, 
 
h5, 
 
h6 { 
 
    color: #444444; 
 
    font-family: "gothammediumwebfont"; 
 
} 
 
.simplehead { 
 
    color: #444444; 
 
    display: flex; 
 
    font-size: 14px !important; 
 
    font-weight: bold; 
 
    line-height: 18px; 
 
    margin: 0 15px 10px 0; 
 
} 
 
.section { 
 
    background: #fff none repeat scroll 0 0; 
 
    border-radius: 7px; 
 
    box-shadow: 2px 2px 2px -1px #dedddd; 
 
    clear: both; 
 
    display: table; 
 
    margin: 0 auto 20px; 
 
    padding: 2%; 
 
    width: 96%; 
 
} 
 
.section:last-child { 
 
    margin: 0; 
 
} 
 
.col { 
 
    display: block; 
 
    float: left; 
 
    margin: 0 0 1% 0; 
 
    overflow: hidden; 
 
} 
 
ul.qa { 
 
    list-style: outside none none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.qa li { 
 
    background: #fff url("../imagesSurvey/line-img.png") repeat-x scroll left bottom; 
 
    line-height: 2em; 
 
    list-style: outside none none; 
 
    margin: 0; 
 
    padding: 10px 0; 
 
} 
 
.qa li:hover { 
 
    background: #efefef url("../imagesSurvey/line-img.png") repeat-x scroll left bottom; 
 
} 
 
.qa li a { 
 
    list-style: outside none none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.radioquestion li { 
 
    padding: 0 !important; 
 
} 
 
.year { 
 
    display: inline-block; 
 
    padding: 3px 0; 
 
} 
 
ul.radpart { 
 
    list-style: outside none none; 
 
    margin: 40px 0 0; 
 
    padding: 0; 
 
} 
 
.radpart li { 
 
    font-size: 14px; 
 
    list-style: outside none none; 
 
    margin: 0; 
 
    padding: 13px 0 10px 20px; 
 
} 
 
ul.longques { 
 
    list-style: outside none none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.longques li { 
 
    background-image: url("../imagesSurvey/line-img.png"), url("../imagesSurvey/line-img-v.png"); 
 
    background-position: center bottom, right top; 
 
    background-repeat: repeat-x, repeat-y; 
 
    display: table-cell; 
 
    padding: 0; 
 
    text-align: center; 
 
} 
 
.longques li:first-child { 
 
    background-image: url("../imagesSurvey/line-img.png"), url("../imagesSurvey/line-img-v.png"); 
 
    background-position: center bottom, right top; 
 
    background-repeat: repeat-x, repeat-y; 
 
} 
 
.longques li:first-child:hover { 
 
    background-image: url("../imagesSurvey/line-img.png"), url("../imagesSurvey/line-img-v.png"); 
 
    background-position: center bottom, right top; 
 
    background-repeat: repeat-x, repeat-y; 
 
} 
 
.longques li:last-child { 
 
    background-image: url("../imagesSurvey/line-img.png"); 
 
    background-position: center bottom; 
 
    background-repeat: repeat-x; 
 
} 
 
.longques li:last-child:hover { 
 
    background-image: url("../imagesSurvey/line-img.png"); 
 
    background-position: center bottom; 
 
    background-repeat: repeat-x; 
 
} 
 
.longques li:hover { 
 
    background-color: #f7f7f7; 
 
    background-image: url("../imagesSurvey/line-img.png"), url("../imagesSurvey/line-img-v.png"); 
 
    background-position: center bottom, right top; 
 
    background-repeat: repeat-x, repeat-y; 
 
} 
 
.longques li span { 
 
    display: inline-block; 
 
    height: 40px; 
 
    line-height: 40px; 
 
    text-align: center; 
 
    width: 40px; 
 
} 
 
.longques li span:last-child { 
 
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0; 
 
} 
 
.group::before, 
 
.group::after { 
 
    content: ""; 
 
    display: table; 
 
} 
 
.group::after { 
 
    clear: both; 
 
} 
 
.group {} .span_3_of_3 { 
 
    width: 100%; 
 
} 
 
.span_2_of_3 { 
 
    width: 49.6%; 
 
} 
 
.span_1_of_3 { 
 
    width: 32.2%; 
 
} 
 
.span_1_of_1 { 
 
    width: 25%; 
 
} 
 
.span_4_of_1 { 
 
    width: 49.6%; 
 
} 
 
.span_4_of_2 { 
 
    width: 49.6%; 
 
} 
 
.span_5_of_2 { 
 
    width: 100%; 
 
} 
 
p {} .longques li div { 
 
    background-image: url("../imagesSurvey/line-img.png"), url("../imagesSurvey/line-img.png"); 
 
    background-position: center bottom, center top; 
 
    background-repeat: repeat-x, repeat-x; 
 
    padding: 11px 10px; 
 
} 
 
.secure { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.secure ul { 
 
    list-style: outside none none; 
 
    margin: 0 0 0 15px; 
 
    padding: 0; 
 
} 
 
.secure li { 
 
    list-style: outside none none; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.secure li span { 
 
    background: rgba(0, 0, 0, 0) url("../imagesSurvey/line-img-v.png") repeat-y scroll right bottom; 
 
    display: inline-block; 
 
    height: 44px; 
 
    text-align: center; 
 
    width: 17%; 
 
} 
 
.namefile { 
 
    float: left; 
 
    height: 40px; 
 
    line-height: 20px; 
 
    overflow: auto; 
 
    width: 50%; 
 
} 
 
.ques { 
 
    background: rgba(0, 0, 0, 0) url("../imagesSurvey/line-img.png") repeat-x scroll center bottom; 
 
    display: table; 
 
    float: left; 
 
    min-height: 40px; 
 
    padding: 0 1%; 
 
    text-align: center; 
 
    width: 43%; 
 
} 
 
.ques:hover { 
 
    background: #f7f7f7 url("../imagesSurvey/line-img.png") repeat-x scroll center bottom; 
 
} 
 
.tohide { 
 
    display: none; 
 
} 
 
.empty_div { 
 
    clear: both; 
 
    margin: 0 0 20px; 
 
    padding: 20px; 
 
} 
 
.answered { 
 
    border: 1px solid #fff; 
 
    opacity: 0.7; 
 
} 
 
.answered:hover { 
 
    border: 1px solid #ebebeb; 
 
    opacity: 1; 
 
} 
 
.survey-lite .next { 
 
    background-position: 8px 7px; 
 
    border-radius: 0 0 2px 2px; 
 
    box-shadow: 0 3px 4px 0 #c7c7c7; 
 
    top: 58px; 
 
} 
 
.survey-lite .prev { 
 
    background-position: 8px -22px; 
 
    border-radius: 2px 2px 0 0; 
 
    bottom: 0; 
 
    box-shadow: 0 0 4px 2px #c7c7c7; 
 
} 
 
.survey-lite .prev:hover { 
 
    background-position: 8px -22px; 
 
} 
 
.survey-lite .next:hover { 
 
    background-position: 8px 7px; 
 
} 
 
.survey-lite a, 
 
.survey-lite a:visited { 
 
    backface-visibility: hidden; 
 
    background: #fff url("../imagesSurvey/icon-arrowdown.png") no-repeat scroll 0 0; 
 
    cursor: pointer; 
 
    height: 35px; 
 
    left: 50%; 
 
    margin-left: -22px; 
 
    opacity: 0.9; 
 
    position: fixed; 
 
    transform: translateZ(0px); 
 
    transition: all 0.1s linear 0s; 
 
    width: 45px; 
 
    z-index: 1000; 
 
} 
 
.survey-lite {} .survey-lite a:hover { 
 
    backface-visibility: hidden; 
 
    background: #fff url("../imagesSurvey/icon-arrowdown.png") no-repeat scroll 0 0; 
 
    transform: translateZ(0px); 
 
    transition: all 0.2s linear 0s; 
 
} 
 
.survey-lite .next, 
 
.survey-lite .prev { 
 
    display: none; 
 
} 
 
.radbtn { 
 
    display: block; 
 
    margin: 0 auto; 
 
    width: 40px; 
 
} 
 
.required { 
 
    background: red none repeat scroll 0 0; 
 
    border-radius: 3px; 
 
    color: #fff; 
 
    font-size: 11px; 
 
    margin-top: 52px; 
 
    padding: 7px; 
 
    position: absolute; 
 
} 
 
.section1 { 
 
    border-radius: 7px; 
 
    clear: both; 
 
    display: table; 
 
    margin: 0; 
 
    position: absolute; 
 
    width: 93%; 
 
} 
 
.selectIncdate { 
 
    width: 100% !important; 
 
} 
 
@-moz-document url-prefix("") { 
 
    .contfull { 
 
    width: 60.5%; 
 
    } 
 
} 
 
@media (max-width: 768px) { 
 
    label.yearwise { 
 
    margin-right: 2%; 
 
    width: 25%; 
 
    } 
 
    .namefile { 
 
    font-size: 12px; 
 
    line-height: 20px; 
 
    min-height: 40px; 
 
    width: 35%; 
 
    } 
 
    .ques { 
 
    padding: 0; 
 
    width: 65%; 
 
    } 
 
    .secure ul { 
 
    list-style: outside none none; 
 
    margin: 0; 
 
    padding: 0; 
 
    } 
 
    .longques li { 
 
    background-image: url("../imagesSurvey/line-img.png"), url("../imagesSurvey/line-img-v.png"); 
 
    background-position: center bottom, right top; 
 
    background-repeat: repeat-x, repeat-y; 
 
    display: inline-block; 
 
    float: left; 
 
    margin-bottom: 15px; 
 
    padding: 0; 
 
    text-align: center; 
 
    } 
 
    .secure li span { 
 
    font-size: 12px; 
 
    line-height: 18px; 
 
    padding: 0; 
 
    width: 18% !important; 
 
    } 
 
} 
 
@media (max-width: 480px) { 
 
    .col { 
 
    margin: 1% 0 1% 0; 
 
    } 
 
    .span_3_of_3, 
 
    .span_2_of_3, 
 
    .span_1_of_3, 
 
    .span_1_of_1, 
 
    .span_5_of_2 { 
 
    width: 100%; 
 
    } 
 
    label.yearwise { 
 
    margin-bottom: 8px; 
 
    margin-right: 0; 
 
    width: 99% !important; 
 
    } 
 
    .span_4_of_1 { 
 
    padding: 0 5px 0 0; 
 
    width: 26.6%; 
 
    } 
 
    .span_4_of_2 { 
 
    padding: 0 0 0 5px; 
 
    width: 67.6%; 
 
    } 
 
    .radpart li { 
 
    font-size: 14px !important; 
 
    height: 64px; 
 
    overflow-y: scroll; 
 
    padding: 7px 0 3px !important; 
 
    } 
 
    ul.radpart { 
 
    list-style: outside none none; 
 
    margin: 45px 0 0; 
 
    padding: 0; 
 
    } 
 
    .contfull { 
 
    display: block; 
 
    padding: 4%; 
 
    width: 92%; 
 
    } 
 
    .namefile { 
 
    min-height: auto !important; 
 
    width: 100% !important; 
 
    } 
 
    .ques { 
 
    background-image: url("../imagesSurvey/line-img.png"), url("../imagesSurvey/line-img.png"); 
 
    background-position: center bottom, center top; 
 
    background-repeat: repeat-x, repeat-x; 
 
    margin-bottom: 10px; 
 
    margin-top: 10px; 
 
    min-height: inherit; 
 
    padding: 0; 
 
    width: 100% !important; 
 
    } 
 
    .ques:hover { 
 
    background-color: #f7f7f7; 
 
    background-image: url("../imagesSurvey/line-img.png"), url("../imagesSurvey/line-img.png"); 
 
    background-position: center bottom, center top; 
 
    background-repeat: repeat-x, repeat-x; 
 
    } 
 
    .secure li span { 
 
    font-size: 12px; 
 
    padding: 5px 0 !important; 
 
    width: 50px !important; 
 
    } 
 
    input[type="text"] { 
 
    width: 98.5%; 
 
    } 
 
    textarea { 
 
    width: 98.5%; 
 
    } 
 
} 
 
@-moz-document url-prefix("") { 
 
    @media (max-width: 2500px) { 
 
    .contfull { 
 
     width: 99.2%; 
 
    } 
 
    } 
 
    @media (max-width: 768px) { 
 
    .contfull { 
 
     width: 96.2%; 
 
    } 
 
    } 
 
    @media (max-width: 640px) { 
 
    .contfull { 
 
     width: 99.2%; 
 
    } 
 
    } 
 
    @media (max-width: 480px) { 
 
    .contfull { 
 
     width: 96% !important; 
 
    } 
 
    } 
 
    @media (max-width: 320px) { 
 
    .contfull { 
 
     width: 96% !important; 
 
    } 
 
    } 
 
} 
 
.survey-lite .next, 
 
.survey-lite .prev { 
 
    display: none; 
 
} 
 
.rwd-table { 
 
    border-collapse: collapse; 
 
    font-size: 14px !important; 
 
    margin: 1em 0; 
 
    width: 100%; 
 
} 
 
.rwd-table tr:hover { 
 
    background: #efefef none repeat scroll 0 0; 
 
} 
 
td.surveyquest { 
 
    float: left; 
 
    font-size: 14px; 
 
    height: 30px !important; 
 
    overflow-x: hidden !important; 
 
    overflow-y: auto !important; 
 
    padding: 0 !important; 
 
} 
 
.rwd-table th { 
 
    display: none; 
 
} 
 
.rwd-table th:last-child { 
 
    background-image: url("../imagesSurvey/line-img.png"), none; 
 
} 
 
.rwd-table td { 
 
    display: block; 
 
    font-size: 14px; 
 
    padding: 0 10px; 
 
} 
 
.rwd-table td:first-child { 
 
    padding-top: 0.5em; 
 
} 
 
.rwd-table td:last-child { 
 
    padding-bottom: 0.5em; 
 
} 
 
.rwd-table td::before { 
 
    content: attr(data-th)" "; 
 
    display: inline-block; 
 
    font-weight: normal; 
 
    width: 6.5em; 
 
} 
 
@media (max-width: 480px) { 
 
    .rwd-table td:first-child { 
 
    background-image: url("../imagesSurvey/line-img.png"); 
 
    background-position: center bottom; 
 
    background-repeat: repeat-x; 
 
    font-weight: normal; 
 
    padding-bottom: 15px; 
 
    padding-top: 15px; 
 
    width: 100%; 
 
    } 
 
    .rwd-table th, 
 
    .rwd-table td:first-child::before { 
 
    padding: 0; 
 
    width: 0; 
 
    } 
 
    .rwd-table th, 
 
    .rwd-table td { 
 
    background-image: url("../imagesSurvey/line-img.png"), none; 
 
    text-align: left; 
 
    } 
 
    .rwd-table td.borderrad span.radbtn { 
 
    display: inline-block; 
 
    float: none; 
 
    margin: 0 auto; 
 
    width: 40px; 
 
    } 
 
    .rwd-table td::before { 
 
    content: attr(data-th)" "; 
 
    display: block; 
 
    float: left; 
 
    font-weight: normal; 
 
    line-height: 44px; 
 
    padding: 0; 
 
    width: 50%; 
 
    } 
 
    td.surveyquest { 
 
    float: none; 
 
    height: auto !important; 
 
    padding: 10px 10px 5px !important; 
 
    } 
 
} 
 
@media (min-width: 480px) { 
 
    .rwd-table td::before { 
 
    display: none; 
 
    } 
 
    .rwd-table th, 
 
    .rwd-table td { 
 
    display: table-cell; 
 
    font-size: 14px !important; 
 
    font-weight: normal; 
 
    padding: 2px 0; 
 
    } 
 
    .rwd-table th:first-child, 
 
    .rwd-table td:first-child { 
 
    background-image: none, none; 
 
    font-size: 13px !important; 
 
    padding-left: 10px; 
 
    } 
 
    .rwd-table th:last-child, 
 
    .rwd-table td:last-child { 
 
    background-image: url("../imagesSurvey/line-img.png"), none; 
 
    padding-right: 0; 
 
    } 
 
    .rwd-table { 
 
    color: #444444; 
 
    overflow: hidden; 
 
    } 
 
    .rwd-table tr { 
 
    border-color: #46627f; 
 
    display: table-row; 
 
    } 
 
    .rwd-table th, 
 
    .rwd-table td { 
 
    margin: 0.5em 1em; 
 
    } 
 
    .rwd-table th, 
 
    .rwd-table td { 
 
    font-size: 13px !important; 
 
    font-weight: normal; 
 
    } 
 
    .rwd-table th, 
 
    .rwd-table td::before { 
 
    color: #444444; 
 
    } 
 
    td.surveyquest { 
 
    height: auto; 
 
    padding: 4px 0 !important; 
 
    } 
 
} 
 
.borderrad { 
 
    background-image: url("http://publish.adsys2.bonzaii.no/imagesSurvey/line-img.png"), url("http://publish.adsys2.bonzaii.no/imagesSurvey/line-img-v.png"); 
 
    background-position: center bottom, right top; 
 
    background-repeat: repeat-x, repeat-y; 
 
    display: table-cell; 
 
    padding: 5px; 
 
    vertical-align: top; 
 
}
<!DOCTYPE html> 
 
<html> 
 
<title>Simple HTML5 blog</title> 
 

 
<head></head> 
 

 
<body> 
 

 
    <div class="content"> 
 
    <div class="container_q"> 
 

 
     <div class="contfull" style="width:700px !important;"> 
 
     <div style="display: block; margin-top: 0px;" class="section group tohide" id="question_6"> 
 
      <div class="col span_3_of_3"> 
 
      <div class="simplehead"> 
 
       <div>Hvor godt mener du at følgende påstander om artiklene i Skeidars kundemagasin stemmer? (1 = stemmer overhode ikke, 5 = stemmer veldig godt)</div> 
 
      </div> 
 
      </div> 
 
      <div class="col span_3_of_3"> 
 
      <table class="rwd-table"> 
 

 
       <tbody> 
 
       <tr> 
 
        <!--THIS CODE LIST OPTIONS NUMBER/TEXT--> 
 
        <th>&nbsp;</th> 
 
        <th class="borderrad">1</th> 
 
        <th class="borderrad">2</th> 
 
        <th class="borderrad">3</th> 
 
        <th class="borderrad">4</th> 
 
        <th class="borderrad">5</th> 
 
        <th class="borderrad">Ingen oppfatning</th> 
 
       </tr> 
 
       <!-- END HERE --> 
 

 
       <tr> 
 
        <td data-th="&nbsp;" class="surveyquest">Artiklene henvender seg til meg</td> 
 
        <td data-th="1" class="borderrad"><span class="radbtn"> <input id="1_32964120" name="radio_32964120" value="1" type="radio"><label for="1_32964120"></label></span> 
 
        </td> 
 
        <td data-th="2" class="borderrad"><span class="radbtn"> <input id="2_32964120" name="radio_32964120" value="2" type="radio"><label for="2_32964120"></label></span> 
 
        </td> 
 
        <td data-th="3" class="borderrad"><span class="radbtn"> <input id="3_32964120" name="radio_32964120" value="3" type="radio"><label for="3_32964120"></label></span> 
 
        </td> 
 
        <td data-th="4" class="borderrad"><span class="radbtn"> <input id="4_32964120" name="radio_32964120" value="4" type="radio"><label for="4_32964120"></label></span> 
 
        </td> 
 
        <td data-th="5" class="borderrad"><span class="radbtn"> <input id="5_32964120" name="radio_32964120" value="5" type="radio"><label for="5_32964120"></label></span> 
 
        </td> 
 
        <td data-th="Ingen oppfatning" class="borderrad"><span class="radbtn"> <input id="6_32964120" name="radio_32964120" value="Ingen oppfatning" type="radio"><label for="6_32964120"></label></span> 
 
        </td> 
 

 
       </tr> 
 

 

 
       <tr> 
 
        <td data-th="&nbsp;" class="surveyquest">Artiklene ga meg ny informasjon</td> 
 
        <td data-th="1" class="borderrad"><span class="radbtn"> <input id="1_32991258" name="radio_32991258" value="1" type="radio"><label for="1_32991258"></label></span> 
 
        </td> 
 
        <td data-th="2" class="borderrad"><span class="radbtn"> <input id="2_32991258" name="radio_32991258" value="2" type="radio"><label for="2_32991258"></label></span> 
 
        </td> 
 
        <td data-th="3" class="borderrad"><span class="radbtn"> <input id="3_32991258" name="radio_32991258" value="3" type="radio"><label for="3_32991258"></label></span> 
 
        </td> 
 
        <td data-th="4" class="borderrad"><span class="radbtn"> <input id="4_32991258" name="radio_32991258" value="4" type="radio"><label for="4_32991258"></label></span> 
 
        </td> 
 
        <td data-th="5" class="borderrad"><span class="radbtn"> <input id="5_32991258" name="radio_32991258" value="5" type="radio"><label for="5_32991258"></label></span> 
 
        </td> 
 
        <td data-th="Ingen oppfatning" class="borderrad"><span class="radbtn"> <input id="6_32991258" name="radio_32991258" value="Ingen oppfatning" type="radio"><label for="6_32991258"></label></span> 
 
        </td> 
 

 
       </tr> 
 

 

 
       <tr> 
 
        <td data-th="&nbsp;" class="surveyquest">Artiklene er velskrevne</td> 
 
        <td data-th="1" class="borderrad"><span class="radbtn"> <input id="1_33018395" name="radio_33018395" value="1" type="radio"><label for="1_33018395"></label></span> 
 
        </td> 
 
        <td data-th="2" class="borderrad"><span class="radbtn"> <input id="2_33018395" name="radio_33018395" value="2" type="radio"><label for="2_33018395"></label></span> 
 
        </td> 
 
        <td data-th="3" class="borderrad"><span class="radbtn"> <input id="3_33018395" name="radio_33018395" value="3" type="radio"><label for="3_33018395"></label></span> 
 
        </td> 
 
        <td data-th="4" class="borderrad"><span class="radbtn"> <input id="4_33018395" name="radio_33018395" value="4" type="radio"><label for="4_33018395"></label></span> 
 
        </td> 
 
        <td data-th="5" class="borderrad"><span class="radbtn"> <input id="5_33018395" name="radio_33018395" value="5" type="radio"><label for="5_33018395"></label></span> 
 
        </td> 
 
        <td data-th="Ingen oppfatning" class="borderrad"><span class="radbtn"> <input id="6_33018395" name="radio_33018395" value="Ingen oppfatning" type="radio"><label for="6_33018395"></label></span> 
 
        </td> 
 

 
       </tr> 
 

 

 
       <tr> 
 
        <td data-th="&nbsp;" class="surveyquest">Artiklene er inspirerende</td> 
 
        <td data-th="1" class="borderrad"><span class="radbtn"> <input id="1_33045532" name="radio_33045532" value="1" type="radio"><label for="1_33045532"></label></span> 
 
        </td> 
 
        <td data-th="2" class="borderrad"><span class="radbtn"> <input id="2_33045532" name="radio_33045532" value="2" type="radio"><label for="2_33045532"></label></span> 
 
        </td> 
 
        <td data-th="3" class="borderrad"><span class="radbtn"> <input id="3_33045532" name="radio_33045532" value="3" type="radio"><label for="3_33045532"></label></span> 
 
        </td> 
 
        <td data-th="4" class="borderrad"><span class="radbtn"> <input id="4_33045532" name="radio_33045532" value="4" type="radio"><label for="4_33045532"></label></span> 
 
        </td> 
 
        <td data-th="5" class="borderrad"><span class="radbtn"> <input id="5_33045532" name="radio_33045532" value="5" type="radio"><label for="5_33045532"></label></span> 
 
        </td> 
 
        <td data-th="Ingen oppfatning" class="borderrad"><span class="radbtn"> <input id="6_33045532" name="radio_33045532" value="Ingen oppfatning" type="radio"><label for="6_33045532"></label></span> 
 
        </td> 
 

 
       </tr> 
 
       </tbody> 
 
      </table> 
 
      </div> 
 
     </div> 
 

 
</body> 
 

 
</html>

JSFIDDLE

+0

gdzie jest kod? Skrzypce może zrobić – Chris

+0

Masz jakiś kod do tego :) –

+0

chcesz zobaczyć html ... –

Odpowiedz

0

W kodzie masz wpis jest jakaś zabłąkana tekst. Po ostatecznym </tr> masz litery ur. Czy to na prawdziwej stronie? jeśli tak, to spowoduje, że przeglądarka będzie zachowywać się śmiesznie podczas renderowania tabeli, ponieważ tekst nie jest zawarty w żadnym elemencie tabeli.

Może to być po prostu literówka z kopiowania i wklejania kodu, ale popełniłem błędy, gdy mam do czynienia z tabelami i widziałem, że to powoduje problemy, więc pomyślałem, że zapytam.

+0

Pierwotny pytający znalazł rozwiązanie i opublikował odpowiedź w komentarzach. –

0

Znalazłem rozwiązanie może być jego pomaga.

Oto rozwiązanie ..

td.surveyquest { 
    height: 30px !important; 
    overflow:auto !important; 
    overflow-x:hidden !important; 
    float: left; 
    padding: 0px !important; 
    -webkit-text-size-adjust: 100%; 
    font-size:14px; 
} 

Było przesłonić css. Staraj się unikać korzystania z ! Ważne za każdym razem. Używał go, gdy jest to konieczne. Sprawdź także kod css, czy nie ma jakiegoś nadpisania kodu.

+0

zgodził się,! Ważne nie powinno się używać za każdym razem – riazshah

1

Zgadzam się, że należy unikać używania "! Important" często. Czy próbowałeś użyć układu tabeli: poprawiono właściwość?

W twoim przypadku powiedziałbym coś takiego:

.rwd-table { table-layout: fixed; } 

Dodanie innej tabeli owinąć tylko wyboru

Powiązane problemy