Мобильная версияузкую линию, которая выглядит как граница внутри таблицы
`
Код: Выделить всё
html,
body {
margin: 0;
padding: 0;
height: 100%;
background: #FFFFFF;
}
.sub-heading {
color: #595959;
font-family: Helvetica Now Display;
font-size: 16.17px;
/* Increased by 1.75 */
font-weight: 300;
line-height: 27.84px;
/* Increased by 1.75 */
text-align: left;
}
.green-container {
border: 2px solid #87976e;
border-radius: 5px;
width: 80%;
margin: auto;
}
.discover-container {
margin: 2rem auto;
padding: 20px;
font-family: Helvetica Now Display;
font-size: 36.75px;
/* Increased by 1.75 */
line-height: 56px;
/* Increased by 1.75 */
color: #343333;
background-color: #fff;
text-align: center;
width: 94%;
box-sizing: border-box;
border-radius: 20px;
}
.discover-container .discover-container-spacer h3 {
font-size: 52.5px;
/* Increased by 1.75 */
font-weight: 700;
line-height: 75.25px;
/* Increased by 1.75 */
margin: 10px;
color: #343333;
font-family: Helvetica Now Display;
}
.discover-container p {
font-weight: 300;
font-size: 36.75px;
/* Increased by 1.75 */
line-height: 44.1px;
/* Increased by 1.75 */
color: #343333;
font-family: Helvetica Now Display;
margin: 0px auto;
max-width: 75ch;
}
.discover-container .cta-btn {
display: inline-block;
margin: 20px auto 0;
color: #fff;
padding: 0;
border-radius: 5px;
width: 100%;
max-width: 280px;
}
.discover-container .cta-btn a {
display: block;
text-decoration: none;
color: #fff;
}
.discover-container .cta-btn button {
width: max-content;
max-width: 100%;
min-width: 238px;
display: inline-block;
background-color: #84161d;
padding: 5px 25px;
color: #fff;
font-family: Helvetica Now Display;
font-size: 36.75px;
/* Increased by 1.75 */
font-weight: 700;
height: 50px;
border-radius: 25px;
border: none;
cursor: pointer;
}
.discover-container .cta-btn button:hover {
background-color: #84161d;
transition: 0.3s;
color: #fff;
}
.title-head {
color: #84161D;
font-family: Helvetica Now Display;
font-size: 21.56px;
/* Increased by 1.75 */
font-weight: 700;
line-height: 31.45px;
/* Increased by 1.75 */
text-align: left;
}
.container {
font-family: "Helvetica Now Display", "serif";
height: 1472px;
width: 1041.25px;
margin: auto;
background-color: #F5F5F5;
page-break-after: always;
}
.desc-img-div {
width: 50.4px;
height: 49.315px;
top: 0.55px;
gap: 0px;
opacity: 0px;
background: #FFF4F4;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
}
.desc-img {
width: 29.645px;
height: 35px;
opacity: 0px;
}
.triangle {
position: absolute;
top: -5px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid#f7f4f4;
gap: 0px;
opacity: 0px;
}
.logo-div {
width: 111.2125px;
height: 61.8975px;
}
.wrapper {
width: 94%;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.insights .container {
font-family: "Helvetica Now Display", "serif";
height: 1470px;
width: 1041.25px;
margin: auto;
background-color: #f5f5f5;
}
.insights .header-container {
background: #FFFFFF;
display: flex;
justify-content: space-between;
align-items: center;
height: 90px;
}
.insights .logo-img {
padding-left: 0px;
width: 100%;
height: 100%;
}
.insights .desc-div {
display: flex;
width: 250.51px;
height: 29.29px;
gap: 6px;
opacity: 0px;
}
.insights .desc-img-div {
width: 50.8px;
height: 49.18px;
top: 0.55px;
gap: 0px;
opacity: 0px;
background: #FFF4F4;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50px;
}
.insights .title-img {
width: 42.94px;
height: 44px;
opacity: 0px;
}
.insights .desc-img {
width: 29.94px;
height: 35px;
opacity: 0px;
}
.insights .desc-p1 {
font-family: Helvetica Now Display;
font-size: 15.39px;
font-weight: 700;
line-height: 33.34px;
text-align: left;
margin: 0;
margin-bottom: -9px;
color: #555555;
}
.insights .desc-p2 {
font-family: Helvetica Now Display;
font-size: 15.39px;
font-weight: 300;
line-height: 33.34px;
text-align: left;
margin: 0;
color: #555555;
}
.insights .title {
margin: 35px 30px;
font-size: 24.54px;
font-weight: 700;
color: #44546A;
margin-bottom: 10px;
font-family: "Helvetica Now Display";
list-style: 18.13px
}
.insights .card {
border-radius: 10.36px;
background-color: #ffffff;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
padding-bottom: 2px;
margin: 0px 30px;
}
.insights .cover {
background-color: #fff;
width: 100%;
}
.insights .cover .dashboard-insigts {
width: 100%;
background-color: #f5f5f5;
height: calc(100vh - 90px);
overflow-y: scroll;
border-top-left-radius: 1rem;
}
.insights .cover .dashboard-insigts .tabs {
max-width: 100%;
width: 94%;
display: flex;
flex-direction: row;
align-items: start;
gap: 0.3rem;
margin-left: 3%;
margin-top: 2rem;
}
.insights .cover .dashboard-insigts .tabs .tab {
background-color: #fff;
border-radius: 10px;
cursor: pointer;
flex-grow: 0;
flex-wrap: nowrap;
}
.insights .cover .dashboard-insigts .tabs .tab div {
color: #5f5f5f;
font-size: 17px;
margin: 8px 10px;
font-weight: 300;
font-family: "Helvetica Now Display";
}
.insights .cover .dashboard-insigts .tabs .active0 {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.insights .cover .dashboard-insigts .tabs .active0 div {
color: #97a97c;
font-weight: 700;
border-bottom: 1px solid #97a97c;
margin-bottom: 20px;
}
.insights .cover .dashboard-insigts .tabs .active1 {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.insights .cover .dashboard-insigts .tabs .active1 div {
color: #84161d;
font-weight: 700;
border-bottom: 1px solid #84161d;
margin-bottom: 20px;
}
.insights .cover .dashboard-insigts .tabs .active2 {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
.insights .cover .dashboard-insigts .tabs .active2 div {
color: #44546a;
font-weight: 700;
border-bottom: 1px solid #44546a;
margin-bottom: 20px;
}
.insights .cover .dashboard-insigts .box {
max-width: 100%;
width: 94%;
margin: auto;
border-radius: 15px;
background-color: #fff;
padding-bottom: 1rem;
}
.insights .cover .dashboard-insigts .box .leppa-container .lpp {
font-weight: 300;
align-self: flex-start;
margin-left: 2%;
font-size: 18px;
font-family: "Helvetica Now Display";
color: #3b3939;
}
.insights .cover .dashboard-insigts .box .leppa-container .lepa-container {
display: flex;
gap: 2rem;
}
.insights .cover .dashboard-insigts .box .leppa-container .lepa-container .lp-container {
display: flex;
align-items: center;
justify-content: center;
}
.insights .cover .dashboard-insigts .box .leppa-container .lepa-container .lp-container div {
font-family: "Helvetica Now Display";
font-size: 21px;
font-weight: 300;
color: #3b3939;
display: inline-flex;
margin: 0;
}
.insights .cover .dashboard-insigts .box .leppa-container .lepa-container .lp-container img {
object-fit: contain;
width: 33px;
margin-right: 0.4rem;
}
.insights .matrix {
font-family: "Helvetica Now Display";
width: 954.02px;
margin: auto;
margin-bottom: 1rem;
border-radius: 12px;
padding: 0;
border-collapse: collapse;
}
.insights .matrix .head .row {
display: flex;
}
.insights .matrix .head .row {
display: flex;
}
.insights .matrix .head .h-cell {
font-size: 16.88px;
line-height: 18.36px;
color: #fff;
text-align: start;
font-weight: 700;
padding: 16px 4px 16px 8px;
margin: 0;
display: flex;
align-items: center;
font-family: "Helvetica Now Display";
}
.insights .matrix .head .alignment-text {
font-size: 15.32px;
font-weight: 300;
text-wrap: nowrap;
margin: 0;
}
.insights .matrix .head .thead-img {
background-color: #fff;
border-radius: 100%;
padding: 4px;
object-fit: contain;
height: 25.43px;
margin-right: 0.7rem;
}
.insights .matrix .head .collapse-img {
object-fit: contain;
height: 18px;
text-align: center;
cursor: pointer;
}
.insights .matrix .head .h-cell:first-child {
border-top-left-radius: 10px;
}
.insights .matrix .head .h-cell:last-child {
border-top-right-radius: 10px;
}
.insights .matrix .head .superscript {
display: none;
font-family: "Helvetica Now Display";
font-size: 19px;
font-weight: 700;
vertical-align: top;
position: relative;
top: -3px;
left: 1px;
}
.insights .matrix .body .row {
display: flex;
min-height: 45px;
}
.insights .matrix .body .b-cell {
display: flex;
align-items: center;
color: #343333;
font-size: 15.32px;
line-height: 20.33px;
font-weight: 300;
text-align: start;
padding: 4px 8px 4px 8px;
font-family: "Helvetica Now Display";
}
.insights .matrix .body .b-cell:not(:first-child) {
justify-content: center;
}
.insights .matrix .body .row:nth-child(odd) {
background-color: #f0f0f0;
}
.insights .matrix .body .row:last-child {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.insights .collapsed .head .h-cell:first-child {
border-bottom-left-radius: 10px;
}
.insights .collapsed .head .h-cell:last-child {
border-bottom-right-radius: 10px;
}
.insights .green {
border: 2px solid #97a97c;
}
.insights .green .head .h-cell {
background-color: #97a97c;
}
.insights .green .head .h-cell:nth-child(2) {
border-left: 2px solid #d0dcbf;
text-align: center;
}
.insights .green .head .h-cell:nth-child(3) {
border-left: 2px solid #d0dcbf;
border-right: 2px solid #d0dcbf;
text-align: center;
}
.insights .green .body .b-cell:nth-child(2) {
border-left: 2px solid #d0dcbf;
text-align: center;
}
.insights .green .body .b-cell:nth-child(3) {
border-left: 2px solid #d0dcbf;
border-right: 2px solid #d0dcbf;
text-align: center;
}
.insights .green1 {
border: 1.03px solid #44546A;
}
.insights .green1 .head .h-cell {
background-color: #44546A;
}
.insights .green1 .body .b-cell:nth-child(2) {
border-left: 2px solid #d0dcbf;
text-align: center;
}
.insights .green1 .body .b-cell:nth-child(3) {
border-left: 2px solid #d0dcbf;
border-right: 2px solid #d0dcbf;
text-align: center;
}
.insights .discover-container {
margin: 2rem auto;
padding: 18px;
font-family: Helvetica Now Display;
font-size: 21px;
line-height: 32px;
color: #343333;
background-color: #fff;
text-align: center;
width: 94%;
box-sizing: border-box;
border-radius: 20px;
height: 270px;
}
.insights .lp-container img {
object-fit: contain;
width: 32px;
height: 28px;
margin-right: 0.4rem;
margin-bottom: -8px;
}
.insights2 .green1 {
border: 1.03px solid #84161D;
}
.insights2 .title {
color: #84161D;
}
.insights3 .green1 {
border: 1.03px solid #97A97C;
}
.insights3 .title {
color: #97A97C;
}
Код: Выделить всё
[img]https://40parables-assets.s3.amazonaws.com/icons8-info.svg[/img]
[b](4)[/b] areas that need alignment
We budget heavily for evangelization and sharing the good news
Strongly Agree
Strongly Disagree
We have allocated specific human resources whose singular focus is evangelization
Agree
Strongly Disagree
We allocate building resources for evangelization programs, like Alpha.
Strongly Agree
Disagree
Our budget is created according to our priorities.
Agree
Disagree
`
см. изображение для справки.
https://i.sstatic. net/JpX1jkY2.png
Узкая линия становится границей каждого >столбца. уже применена граница нет, свойства border-collapse.----
Подробнее здесь: https://stackoverflow.com/questions/791 ... stom-table
