css在表中显示webkit框

Question

在下面的图像中，td A和td B具有“衬里”和“厚”类。当我将线条和粗线应用于BCD时，表格中的格式变得混乱。为什么？

所有图片和代码如下。

当我在td C中添加“lined”和“thick”类时。它显示如下：

当我在td D中添加“lined”和“thick”类时，它将显示如下：

.

原谅我可怜的英语。我是台湾人。

我的代码是Css和HTML的图像和脚本形式，如下所示：

.

  @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/[email protected]">新增試卷</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

看来你可能正在将css类设置为tr而不是td。请更正，它应该解决错误。

请提供代码，我可以检查