HTML-письмо: Как расположить 2 кнопки в одну линию, но чтобы они растягивались на весь размер контейнера?
Помогите мне пожалуйсто, решить проблему с кнопками, но так, чтобы верстка не сломалась. Я новичок в верстке html-писем, так что не судите строго, если вопрос окажется легким.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark" />
<meta name="supported-color-schemes" content="light dark" />
<title>title</title>
<style type="text/css">
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
table {
border-spacing: 0;
mso-cellspacing: 0;
mso-padding-alt: 0;
}
td {
padding: 0;
}
#outlook a {
padding: 0;
}
a {
text-decoration: none;
color: #e8fbfa;
font-size: 16px;
}
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse !important;}
</style>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body style="Margin:0;padding:0;min-width:100%;background-color:#FFFFFF;">
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
body {background-color: #dde0e1!important;}
body, table, td, p, a {font-family: sans-serif, Arial, Helvetica!important;}
</style>
<![endif]-->
<center style="width: 100%;table-layout:fixed;background-color: #FFFFFF;padding-top: 40px;padding-bottom: 40px;">
<div style="padding: 20px 16px 20px 16px; max-width: 600px;background-color: #F6F6F6;box-shadow: 0 0 10px rgba(0, 0, 0, .2);">
<!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" border="0" cellspacing="0" cellpadding="0" role="presentation"
style="color:#1C1E23;">
<tr>
<td>
<![endif]-->
<table align="center" border="0" cellspacing="0" cellpadding="0" role="presentation"
style="color: #060B13;font-family: 'Poppins',sans-serif, Arial, Helvetica;background-color: #F6F6F6;Margin:0;padding:0;width: 100%;max-width: 600px;"
>
<!-- SECTION 1 -->
<tr>
<td style="padding: 0 25px 0 25px;" bgcolor="#E3F7FE">
<table border="0" cellspacing="0" cellpadding="0" role="presentation" style="width: 100%; max-width: 600px;">
<tr>
<td style="padding: 10px 0 0px 0;">
<p style="margin: 0; color: #060B13; font-weight: 400; font-size: 18px; line-height: 24px; text-align: center;">Lorem ipsum dolor sit amet</p>
</td>
</tr>
<tr>
<td style="padding: 0px 0 0px 0;">
<p style="margin: 0; color: #060B13; font-weight: 400; font-size: 18px; line-height: 24px; text-align: center;">Consequuntur veniam nostrum perferendis saepe?</p>
</td>
</tr>
<tr>
<td style="padding: 0px 0 30px 0;">
<p style="margin: 0; color: #060B13; font-weight: 400; font-size: 18px; line-height: 24px; text-align: center;">Dignissimos saepe explicabo quae asperiores!</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END SECTION 1 -->
<!-- SECTION 2 -->
<tr>
<td style="padding: 10px 20px 20px 20px; font-size: 0;" bgcolor="#E3F7FE">
<table border="0" cellspacing="0" cellpadding="0" role="presentation">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" role="presentation" style="vertical-align: top; display: inline-block;">
<tr>
<td style="padding: 0 20px 0 0;">
<table border="0" cellspacing="0" cellpadding="0" role="presentation">
<tr>
<td style="text-align: center; background-color: #FEC833; border-radius: 5px;">
<a href="#" target="_blank" style="background-color: #FEC833; font-size: 18px; font-weight: 600; color: #060B13; display: inline-block; text-decoration: none; padding: 10px 10px 10px 10px; line-height: 20px; border-radius: 5px; text-align: center;"> ДЕТЕКТИВЫ </a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" role="presentation" style="vertical-align: top; display: inline-block;">
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" role="presentation">
<tr>
<td style="text-align: center; background-color: #FEC833; border-radius: 5px;">
<a href="#" target="_blank" style="background-color: #FEC833; font-size: 18px; font-weight: 600; color: #060B13; display: inline-block; text-decoration: none; padding: 10px 10px 10px 10px; line-height: 20px; border-radius: 5px; text-align: center;"> ЗАРУБЕЖНАЯ ЛИТЕРАТУРА </a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<!-- END SECTION 2 -->
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>