css display webkit box in table - html

Question

In below Image td A and td B has "lined" and "thick" class. When I apply lines and thickes to BCD the format in table becomes messed-up. Why?
All images and code are below.
When I add "lined" and "thick" class in td C. It display like this:
When I add "lined" and "thick" class in td D. It will display like this:
.
Forgive for my poor English. I'm Taiwanese.
My code is in image and script-form for Css and HTML here below:
.
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
#import url(https://fonts.googleapis.com/css?family=Fira+Sans);
#import url(https://fonts.googleapis.com/css?family=Montserrat);
#import url(https://fonts.googleapis.com/css?family=Droid+Sans);
.button-Blue {
background-color: #3498DB;
box-shadow: 0px 15px 0px 0px #258cd1;
text-align: center;
padding: 10px;
padding-bottom: 5px;
color: white;
margin-top: 30px;
margin-bottom: 20px;
font-weight: bold;
display: block;
width: 200px;
text-decoration: none
}
.button-Blue:hover {
color: white;
background-color: #49abed;
box-shadow: 0px 15px 0px 0px #439cd8;
-webkit-transition-duration: 0.4s;
text-decoration: none
}
.button-Blue:active {
color: white;
background-color: #49abed;
transform: translateY(4px);
box-shadow: 0px 15px 0px 0px #439cd8;
-webkit-transition-duration: 0.1s;
text-decoration: none
}
.button-Yellow {
background-color: #edeb5e;
box-shadow: 0px 15px 0px 0px #d6d34f;
text-align: center;
color: black;
margin-bottom: 15px;
font-weight: bold;
display: block;
text-decoration: none
}
.button-Yellow:hover {
color: black;
background-color: #f4f273;
box-shadow: 0px 15px 0px 0px #e0df64;
-webkit-transition-duration: 0.4s;
text-decoration: none
}
.button-Yellow:active {
color: black;
background-color: #f4f273;
transform: translateY(4px);
box-shadow: 0px 15px 0px 0px #e0df64;
-webkit-transition-duration: 0.1s;
text-decoration: none
}
.tableShadow {
box-shadow: 0px 3px 2px #999;
}
.button-Green {
background-color: #51d166;
box-shadow: 0px 15px 0px 0px #4dc160;
text-align: center;
color: black;
margin-bottom: 15px;
font-weight: bold;
display: block;
text-decoration: none
}
.button-Green:hover {
color: black;
background-color: #62db76;
box-shadow: 0px 15px 0px 0px #5ace6d;
-webkit-transition-duration: 0.4s;
text-decoration: none
}
.button-Green:active {
color: black;
background-color: #62db76;
transform: translateY(4px);
box-shadow: 0px 15px 0px 0px #5ace6d;
-webkit-transition-duration: 0.1s;
text-decoration: none
}
.button-Orange {
background-color: #e0a32a;
box-shadow: 0px 15px 0px 0px #cc9324;
text-align: center;
color: black;
margin-bottom: 15px;
font-weight: bold;
display: block;
text-decoration: none
}
.button-Orange:hover {
color: black;
background-color: #edb038;
box-shadow: 0px 15px 0px 0px #db9e29;
-webkit-transition-duration: 0.4s;
text-decoration: none
}
.button-Orange:active {
color: black;
background-color: #edb038;
transform: translateY(4px);
box-shadow: 0px 15px 0px 0px #db9e29;
-webkit-transition-duration: 0.1s;
text-decoration: none
}
.button-White {
background-color: #dee2e2;
box-shadow: 0px 15px 0px 0px #d6dbdb;
text-align: center;
color: black;
margin-bottom: 15px;
font-weight: bold;
display: block;
text-decoration: none
}
.button-White:hover {
color: black;
background-color: #eaeded;
box-shadow: 0px 15px 0px 0px #dee0e0;
-webkit-transition-duration: 0.4s;
text-decoration: none
}
.button-White:active {
color: black;
background-color: #eaeded;
transform: translateY(4px);
box-shadow: 0px 15px 0px 0px #dee0e0;
-webkit-transition-duration: 0.1s;
text-decoration: none
}
.button-White {
background-color: #dee2e2;
box-shadow: 0px 15px 0px 0px #d6dbdb;
text-align: center;
color: black;
margin-bottom: 15px;
font-weight: bold;
display: block;
text-decoration: none
}
.button-White:hover {
color: black;
background-color: #eaeded;
box-shadow: 0px 15px 0px 0px #dee0e0;
-webkit-transition-duration: 0.4s;
text-decoration: none
}
.button-White:active {
color: black;
background-color: #eaeded;
transform: translateY(4px);
box-shadow: 0px 15px 0px 0px #dee0e0;
-webkit-transition-duration: 0.1s;
text-decoration: none
}
.button-Purple {
background-color: #aa6ae2;
box-shadow: 0px 15px 0px 0px #985dcc;
text-align: center;
color: black;
margin-bottom: 15px;
font-weight: bold;
display: block;
text-decoration: none
}
.button-Purple:hover {
color: black;
background-color: #ba7bf2;
box-shadow: 0px 15px 0px 0px #ac70e0;
-webkit-transition-duration: 0.4s;
text-decoration: none
}
.button-Purple:active {
color: black;
background-color: #ba7bf2;
transform: translateY(4px);
box-shadow: 0px 15px 0px 0px #ac70e0;
-webkit-transition-duration: 0.1s;
text-decoration: none
}
.button-border-Blue {
cursor: pointer;
border-radius: 5px;
text-decoration: none;
padding: 7px;
font-size: 22px;
transition: .3s;
-webkit-transition: .3s;
-moz-transition: .3s;
-o-transition: .3s;
display: inline-block;
color: #55acee;
border: 2px #55acee solid;
text-align:center;
}
.button-border-Blue:hover {
background-color: #55acee;
color: #fff;
text-decoration: none
}
.button-border-Red {
cursor: pointer;
border-radius: 5px;
text-decoration: none;
padding: 7px;
font-size: 22px;
transition: .3s;
-webkit-transition: .3s;
-moz-transition: .3s;
-o-transition: .3s;
display: inline-block;
color: #e74c3c;
border: 2px #e74c3c solid;
text-align: center;
}
.button-border-Red:hover {
color: #fff;
background-color: #e74c3c;
text-decoration: none
}
.lined.thick {
border: solid 4px #41403E;
-ms-flex-item-align: center;
align-self: center;
background: transparent;
padding: 1rem 1rem;
text-align: center;
font-size: 18px;
-webkit-transition: all .5s ease;
transition: all .5s ease;
color: #41403E;
font-size: 2rem;
letter-spacing: 1px;
outline: none;
-webkit-box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
box-shadow: 20px 38px 34px -26px rgba(0, 0, 0, 0.2);
border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
min-height: 100%;
}
<!-- begin snippet: js hide: false console: true babel: false -->
#model IEnumerable<WebApplication8.Models.Quest>
#{
ViewBag.Title = "Index";
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
table {
width: 100%;
border-collapse: collapse;
}
/* Zebra striping */
tr:nth-of-type(odd) {
background: #eee;
}
th {
background: #333;
color: white;
font-weight: bold;
padding:6px;
}
td, th {
border: 1px solid #ccc;
text-align: center;
}
.remark {
word-break: break-all;
overflow-x: hidden;
max-width: 100px;
}
.scrollDiv{
overflow:scroll;
max-height:300px;
}
##media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
border: 1px solid #ccc;
}
.remark {
max-width: 100%;
}
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 30%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
}
/*
Label the data
*/
td:nth-of-type(1):before {
content: "試卷名稱";
font-weight: bold;
}
td:nth-of-type(2):before {
content: "操作";
font-weight: bold;
}
td:nth-of-type(3):before {
content: "題目數量";
font-weight: bold;
}
td:nth-of-type(4):before {
content: "備註";
font-weight: bold;
}
td:nth-of-type(5):before {
content: "狀態";
font-weight: bold;
}
}
.coordinate {
width: 64px;
float: left;
margin-left: 5px;
padding: 2px;
white-space: pre-line
}
.coordinate2{
margin-bottom:0px;
}
</style>
<link rel="stylesheet" href="~/MyCss/style.css"/>
<div class="">
<p>
<a style="font-size:20px;text-decoration:none;color:white" class="button-Blue" href="/Quests/Create?ClassId=#ViewBag.ClassId">新增試卷</a><!--test-->
</p>
#if (ViewBag.authError != null)
{
<h2 style="color:darkred">權限不足無法進入</h2>
}
<div class="scrollDiv">
<table class="tableShadow">
<thead><tr><th>試卷名稱</th><th>操作</th><th>題目數量</th><th>備註</th><th>狀態</th></tr></thead>
#foreach (var item in Model.Where(x => x.clas.id == ViewBag.ClassId && x.status.Equals("未作答")))
{
<tr>
<td style="width:inherit" class="lined thick">
#Html.DisplayFor(modelItem => item.name)
</td>
<td style="width:25%">
#Html.ActionLink("試卷\n列表", "Edit", new { id = item.id },new { #class = "button-Green coordinate" })
#Html.ActionLink("試卷\n內容", "Details", new { id = item.id }, new { #class = "button-Orange coordinate" })
#Html.ActionLink("題目\n列表", "QuestionsList", new { id = item.id }, new { #class = "button-Purple coordinate" })
#Html.ActionLink("刪除\n試卷", "Delete", new { id = item.id }, new { #class = "button-White coordinate" })
</td>
<td class="lined thick" style="width:inherit">
#item.questions.Count()
</td>
<td class="lined thick" >
#if (item.remark == null)
{
#:nothing
}
else
{
#item.remark
}
</td>
<td class="lined thick">
#item.status
</td>
</tr>
}
</table>
</div>
<p>
<h2 class="lined thick"><b>已作答試卷</b></h2>
</p>
<div class="scrollDiv">
<table>
<thead><tr><th>試卷名稱</th><th>操作</th><th>題目數量</th><th>備註</th><th>狀態</th></tr></thead>
#foreach (var item in Model.Where(x => x.clas.id == ViewBag.ClassId && x.status.Equals("已作答")))
{
<tr>
<td style="width:40%" class="lined thick">
#Html.DisplayFor(modelItem => item.name)
</td>
<td style="width:25%">
#Html.ActionLink("編輯試卷", "Edit", new { id = item.id }) |
#Html.ActionLink("試卷內容", "Details", new { id = item.id }) |
#Html.ActionLink("題目列表", "QuestionsList", new { id = item.id })
|#Html.ActionLink("刪除試卷", "Delete", new { id = item.id })
</td>
<td class="lined thick">
#item.questions.Count()
</td>
<td class="remark lined thick" style="width:20%">
#if (item.remark == null)
{
#:nothing
}
else
{
#item.remark
}
</td>
<td class="lined thick">
#item.status
</td>
</tr>}
</table>
</div>
<div>
#Html.ActionLink("返回", "ClassIndex", new { id = ViewBag.CourseId })
</div>
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
<script src="~/Scripts/jquery.signalR-2.2.2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script>
function myFunction() {
var x = $(window).width();
document.getElementById("demo").innerHTML = x;
}
</script>
}
Image that I want to display
The result that I want is I want this two td display like left td.
But when I add the "lined" and "thick" class to this two td. The table will display like [Image2],[Image3]

Answer 1

It seems that you are probably setting the css class to tr instead of td. Please correct and it should resolve the error.
Please provide the code and I can check it

Answer 2

Maybe you can try to add on a div inside
Like this:
<td style="width:40%">
<div class="lined thick">
#Html.DisplayFor(modelItem => item.name)
</div>
</td>
Because the webkit is overwriting the display for table, while in table, display should be table cell. So try not to overwrite the table cell