#html #css #html-table #border
#HTML #css #html-таблица #граница
Вопрос:
Итак, я создаю шаблон электронной почты, я включил таблицу внутрь, но, как вы можете видеть из кода, когда он отображается, он не показывает границу таблицы. Я хочу иметь обычную однострочную границу таблицы. Я попытался добавить в «class=»table table-bordered», но он по-прежнему не показывает мне границу. Как я могу это решить? 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mizona</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<style type="text/css">
#logo img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
float: none !important;
clear: both;
display: block;
}
td {
word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; font-family:'Verdana', 'Arial', sans-serif; font-weight:normal; line-height:19px; font-size:12px; margin:0; padding:0;
}
img {
max-width: 100%;
}
.desktop-only {
display: block;
}
.mobile-only {
display: none;
}
.align-center {
text-align: center;
}
#cta1 a {
text-decoration: none !important;
color: #FFFFFF !important;
}
.no-spacing {
padding:0px;
margin: 0px;
}
#socialicons img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
float: none !important;
clear: both;
display: inline-block !important;
border: none;
}
#graphic img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
width: auto;
max-width: 100%;
float: none !important;
clear: both;
display: inline-block !important;
}
table[class="body"] .columns td.one {
width: 8.333333% !important;
}
table[class="body"] .column td.one {
width: 8.333333% !important;
}
table[class="body"] .columns td.two {
width: 16.666666% !important;
}
table[class="body"] .column td.two {
width: 16.666666% !important;
}
table[class="body"] .columns td.three {
width: 25% !important;
}
table[class="body"] .column td.three {
width: 25% !important;
}
table[class="body"] .columns td.four {
width: 33.333333% !important;
}
table[class="body"] .column td.four {
width: 33.333333% !important;
}
table[class="body"] .columns td.five {
width: 41.666666% !important;
}
table[class="body"] .column td.five {
width: 41.666666% !important;
}
table[class="body"] .columns td.six {
width: 50%;
}
table[class="body"] .column td.six {
width: 50%;
}
table[class="body"] .columns td.seven {
width: 58.333333% !important;
}
table[class="body"] .column td.seven {
width: 58.333333% !important;
}
table[class="body"] .columns td.eight {
width: 66.666666% !important;
}
table[class="body"] .column td.eight {
width: 66.666666% !important;
}
table[class="body"] .columns td.nine {
width: 75% !important;
}
table[class="body"] .column td.nine {
width: 75% !important;
}
table[class="body"] .columns td.ten {
width: 83.333333% !important;
}
table[class="body"] .column td.ten {
width: 83.333333% !important;
}
table[class="body"] .columns td.eleven {
width: 91.666666% !important;
}
table[class="body"] .column td.eleven {
width: 91.666666% !important;
}
table[class="body"] .columns td.twelve {
width: 100% !important;
}
table[class="body"] .column td.twelve {
width: 100% !important;
}
table[class="body"] .columns td {
padding-top: 10px;
}
.pad-right-10 {
padding-right: 10px;
}
.pad-top-10 {
padding-top: 10px;
}
.mobile-center {
text-align: left !important;
}
@media only screen and (max-width: 600px) {
.pad-right-10 {
padding-right: 0px;
}
.desktop-only {
display: none !important;
}
.mobile-only {
display: block;
}
.mobile-center {
text-align: left !important;
}
.center-mobile {
text-align: center;
}
#logo img {
width: 100% !important;
}
#logo-mobile img {
width: 80% !important;
}
#graphic img {
width: 100% !important;
height: auto !important;
}
*[class].center {
text-align:center !important;
margin:0 auto !important;
}
*[class].bottom-pad{ padding-bottom:35px !important;}
table[class="body"] table.columns td {
width: auto !important;
}
table[class="body"] table.column td .list {
width: auto !important;
}
table[class="body"] img {
width: auto !important;
height: auto !important;
}
table[class="body"] center {
min-width: 0 !important;
}
table[class="body"] .container {
width: 100% !important;
}
table[class="body"] .row {
width: 100% !important;
display: block !important;
}
table[class="body"] .wrapper {
display: block !important;
padding-right: 0 !important;
}
table[class="body"] .columns {
table-layout: fixed !important;
float: none !important;
width: 100% !important;
padding-right: 0px !important;
padding-left: 0px !important;
display: block !important;
}
table[class="body"] .column {
table-layout: fixed !important;
float: none !important;
width: 100% !important;
padding-right: 0px !important;
padding-left: 0px !important;
display: block !important;
}
table[class="body"] .wrapper.first .columns {
display: table !important;
}
table[class="body"] .wrapper.first .column {
display: table !important;
}
table[class="body"] table.columns td {
width: 100% !important;
}
table[class="body"] table.column td {
width: 100% !important;
}
table[class="body"] .columns td {
width: 100% !important;
display: block;
}
table[class="body"] .column td {
width: 100% !important;
display: block;
}
table[class="body"] td.offset-by-one {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-two {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-three {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-four {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-five {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-six {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-seven {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-eight {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-nine {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-ten {
padding-left: 0 !important;
}
table[class="body"] td.offset-by-eleven {
padding-left: 0 !important;
}
table[class="body"] table.columns td.expander {
width: 1px !important;
}
table[class="body"] .right-text-pad {
padding-left: 10px !important;
}
table[class="body"] .text-pad-right {
padding-left: 10px !important;
}
table[class="body"] .left-text-pad {
padding-right: 10px !important;
}
table[class="body"] .text-pad-left {
padding-right: 10px !important;
}
table[class="body"] .hide-for-small {
display: none !important;
}
table[class="body"] .show-for-desktop {
display: none !important;
}
table[class="body"] .show-for-small {
display: inherit !important;
}
table[class="body"] .hide-for-desktop {
display: inherit !important;
}
.social-icon td img {
width: 40px !important;
height: 40px !important;
}
}
</style>
</head>
<body style="width:100% !important; min-width:100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; text-align:left; margin:0; padding:0; background:#eeeeee; ">
<table class="body" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; height:100%; width:100%; background:#eeeeee; margin:0; padding:0; " bgcolor="#EEEEEE">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="center" align="center" valign="top" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:center; font-weight:normal; margin:0; padding:0; ">
<center style="width:100%; min-width:600px; ">
<table class="container" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:600px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; vertical-align:top; text-align:left; margin:0; padding:0;" align="left" valign="top">
<table class="row" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:100%; position:relative; display:block; padding:0px; ">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0;" align="left" bgcolor="#353937">
<td class="wrapper last center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; position:relative; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; margin:0; padding:0px; " align="left" valign="top">
<table class="twelve columns center desktop-only" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:left; width:600px; padding:0; display:table !important; ">
<tbody>
<tr style="vertical-align:top; text-align:left; padding:0; " align="left">
<td class="center" style="word-break:break-word; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; border-collapse:collapse !important; vertical-align:top; text-align:left; color:#555555; line-height:19px; -webkit-transition:font-size 1s ease-in-out !important; margin:0; padding:0px; " align="left" valign="top">
<div class="mktEditable" id="logo" style="" mktoname="logo">
<p class="no-spacing" style="margin: 30px;"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Major-Infrastructure-Issue_Email-Template_Logo.png" alt="eO Logo.png" constrain="true" imagepreview="false" style="max-width: 600px;" /></p>
</div></td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
<table class="container mktoContainer" id="template-wrapper" style="border-spacing:0; border-collapse:collapse; vertical-align:top; text-align:inherit; width:600px; background:#ffffff; margin:0 auto; padding:0; " bgcolor="#FFFFFF">
<tr class="mktoModule" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" id="content-intro-simple" mktoname="content-intro-simple">
<td style="padding: 20px 40px 10px 40px">
<div class="mktEditable" id="heading-simple" style="" mktoname="heading-simple">
<p><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Major Infrastructure Issue_Email Template_Customer Action Required.png" /> <br /> <br /></p>
<h4 style="color: #2ea049; font-size: 18px; line-height: 100%; margin: 0; padding: 0;">Upcoming Security Changes</h4>
<div>
<br />
</div>
<p><b>Customer Name,</b></p>
<p>We are committed to ensuring the highest level of security standards for your most valuable digital assets. This email is requesting your partnership on some important security initiatives.</p>
</div> </td>
</tr>
<tr class="mktoModule" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" id="content-intro-simpled47b52d3-01b4-4053-9a68-431c4cec6c29" mktoname="content-intro-simple-clone">
<td style="padding: 20px 40px; background-color:#EFF2F2">
<table style="width:100%; background-color:white">
<tbody>
<tr>
<td align="center" width="20%"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Major Infrastructure Issue_Email Template_Icons_What.png" /></td>
<td style="width:70%; padding: 15px;">eOriginal is upgrading both our password acceptance criteria and the connection types our solution supports.</td>
</tr>
<tr>
<td align="center" width="20%"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Major Infrastructure Issue_Email Template_Icons_When.png" /></td>
<td style="width:70%;padding: 15px;">Upgrades take effect <span style="color: orange"><strong>March 29th</strong></span> for Preview on Demand, <span style="color: orange"><strong>April 26th</strong></span> for Test on Demand, and <span style="color: orange"><strong>April 28th</strong></span> for Production on Demand.</td>
</tr>
<tr>
<td align="center" width="20%"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Major Infrastructure Issue_Email Template_Icons_Action Required_orange.png" /></td>
<td style="width:70%; padding: 15px;"><span style="color: black"><strong>Ensure your Financial Assets are Safe with Enhanced Password Requirements</strong></span><br />We are requesting all customers ensure their passwords have a minimum length of 8 characters, 1 upper case letter, 1 lower case letter, 1 number, and 1 special character. This applies across both user and API-based sessions.<br /><br /><span style="color: black"><strong>Keep Sensitive Data Exchanged between eOriginal’s Platform, Users, and External Systems Private with Strong Encrypted Connections</strong></span><br />Please ensure that your access to eOriginal’s solution, whether through a browser or API, uses TLS 1.2 with a strong cipher suite (detailed in the attached document).</td>
</tr>
<tr>
<td align="center" width="20%"><img src="http://info.eoriginal.com/rs/907-BBE-942/images/Major Infrastructure Issue_Email Template_Icons_Why.png" /></td>
<td style="width:70%;padding: 15px;">These actions provide greater protection from brute force attacks and keep the communication between eOriginal’s solution, your external systems, and user browser sessions secure.</td>
</tr>
</tbody>
</table> </td>
</tr>
<!-- <tr class="mktoModule" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" id="content-intro-simpled47b52d3-01b4-4053-9a68-431c4cec6c29" mktoname="content-intro-simple-clone">
<td style="padding: 20px 40px 20px 40px; background-color:#EFF2F2">
<div class="mktEditable" id="heading-simpled47b52d3-01b4-4053-9a68-431c4cec6c29" style="" mktoname="heading-simple">
<div>
<br />
</div>
<p style="color: #2ea049; font-size: 16px; line-height: 120%; margin: 0; padding: 0;"><strong>Ensure your Financial Assets are Safe with Enhanced Password Requirements</strong></p>
<p>All customers will be required to comply with a minimum password policy of 8 characters, 1 upper case letter, 1 lower case letter, 1 number, and 1 special character. This will be required across user and API-based sessions.</p>
<br />
<p style="color: #2ea049; font-size: 16px; line-height: 120%; margin: 0; padding: 0;"><strong>Keep Sensitive Data Exchanged between eOriginal’s Platform, Users, and External Systems Private with Strong Encrypted Connections</strong></p>
<p>Any access to eOriginal’s solution, whether through a browser or API, will be required to use TLS 1.2 with a strong cypher suite (detailed in the attached document).</p>
</div> </td>
</tr> -->
<tr class="mktoModule" style="vertical-align:top; text-align:left; padding:0; color: #555555;" align="left" id="content-intro-simpled47b52d3-01b4-4053-9a68-431c4cec6c29cfe45834-9b29-425f-b7e2-ee12f4678d5d" mktoname="content-intro-simple-clone-clone">
<td style="padding: 10px 40px 20px 40px">
<div class="mktEditable" id="heading-simpled47b52d3-01b4-4053-9a68-431c4cec6c29cfe45834-9b29-425f-b7e2-ee12f4678d5d" style="" mktoname="heading-simple">
<p>Full details on these and other upcoming requirements can be found in the attached document. Should you have any questions or concerns, please feel free to contact our support team and they will route you to the most appropriate resource.</p>
<div>
We look forward to partnering with you on these important security initiatives.
</div>
<div></div>
<p>Thank you,</p>
<p><b>Val Daly</b> <br />VP, Customer Services<br /><a href="mailto:support@eoriginal.com" target="_top">support@eoriginal.com</a></p>
</div> </td>
</tr>
<tr class="mktoModule" id="social" mktoname="social" bgcolor="#2EA049">
<td class="two-column" style="font-size: 0; text-align: center;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner mobile-center" style="font-size: 12px; color: #FFFFFF; padding: 20px 40px;"> <a href="http://go.eoriginal.com/JB3eB005bE0cHk00O000000" target="_blank" style="text-decoration:none; color:#ffffff">eOriginal.com</a> </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;">
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 100%">
<tbody>
<tr>
<td align="left" valign="middle" width="50"><a href="https://twitter.com/eOriginal/" style="text-decoration:none;" target="_blank"><img alt="Twitter" src="https://eoriginal.wise-portal.com/newsletter/public/social-twitter-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></a></td>
<td align="left" valign="middle" width="50"><a href="https://www.linkedin.com/company/57606" style="text-decoration:none;" target="_blank"><img alt="LinkedIn" src="https://eoriginal.wise-portal.com/newsletter/public/social-linkedin-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></a></td>
<td align="left" valign="middle" width="50"><a href="http://www.facebook.com/pages/eOriginal/58932553996/" style="text-decoration:none;" target="_blank"><img alt="Facebook" src="https://eoriginal.wise-portal.com/newsletter/public/social-facebook-icon.png" style="color: #FFFFFF; font-size: 12px;" width="40" height="40" /></a></td>
<td align="left" valign="middle" width="50"><a href="https://www.eoriginal.com/eo-insights/" style="text-decoration:none;" target="_blank"><img alt="Blog" src="https://eoriginal.wise-portal.com/newsletter/public/social-blog-icon.png" style="color: #FFFFFF; font-size: 12px; " width="40" height="40" /></a></td>
</tr>
</tbody>
</table> </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--> </td>
</tr>
<tr class="mktoModule" id="footer" mktoname="footer" bgcolor="#353937">
<td class="two-column" style="font-size: 0; text-align: center;">
<!--[if (gte mso 9)|(IE)]>
<table width="100%">
<tr>
<td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> <img src="http://info.eoriginal.com/rs/907-BBE-942/images/nl-footer-logo-v2.2.png" width="200" /><br /><br /> <span>© 2019 eOriginal, Inc. All rights reserved.</span> </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td><td width="50%" valign="top">
<![endif]-->
<div class="rcolumn" style="width: 100%; max-width: 295px; display: inline-block; vertical-align: top;">
<table width="100%">
<tbody>
<tr>
<td class="inner mobile-center" style="font-size: 10px; color: #FFFFFF; padding: 10px 40px;"> The Warehouse at Camden Yards<br /> 351 W. Camden St., Suite 800<br /> Baltimore, MD 21201<br /><br /> SALES <span style="color: #2EA049">1-866-935-1776</span><br />SUPPORT <span style="color: #2EA049">1-866-364-3578</span> </td>
</tr>
</tbody>
</table>
</div>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]--> </td>
</tr>
</table>
</center></td>
</tr>
</tbody>
</table>
</body>
</html> Комментарии:
1.
table-borderedэтого нет в вашем коде. Вам нужно определить это в вашем css<syle>, что-то вроде.table-bordered { border: 1px solid red; }, а затем добавить это в любую таблицу, в которой вы хотите иметь границу<table class="table-bordered">...</table>.2. @sallf я уже пробовал это, но граница отображается только в четырех углах, я хотел показать в каждой строке и столбце, вы понимаете, что я имею в виду?
Ответ №1:
Добавьте стиль ниже в свой css
table {
border-collapse: collapse;
}
td, th {
border: 1px solid black;
}
Ниже приведен скриншот вывода, который я получаю из приведенного выше css.
Для получения дополнительной информации о границе для html-таблицы проверьте эту ссылку https://www.quackit.com/html/codes/tables/html_table_border.cfm
Ниже приведен обновленный код
.table-bordered {
border-collapse: collapse;
}
.“table-bordered” tr, .“table-bordered” td {
border: 1px solid red;
border-collapse: collapse;
}
Комментарии:
1. ПРИВЕТ, это все еще не то, чего я пытаюсь достичь. Граница показывает только 4 угла таблицы и не похожа на изображение, которым я поделился
2. @RajveerSingh Тот же css, который я использовал в JSFiddle, и он работает нормально. Пожалуйста, проверьте jsfiddle.net/en1tbw8h . Это тот способ, который вам нужен? Это работает не во всех браузерах или только в определенном браузере? Я обновил свой предыдущий ответ выводом изображения.
3. код работает сам по себе, но в моем коде, который я предоставил, он не работает. вы можете попробовать это там
4. Не могли бы вы, пожалуйста, проверить это jsfiddle.net/new4zx8c . Если это то, что нужно?
5. Не могли бы вы, пожалуйста, сделать снимок экрана и отметить часть?