Mixing
Check CSS title attribute value empty or not
up vote
0
down vote
favorite
I have a table like this and on desktop everything works fine
Here is HTML:
<table class="responsive-table table-bordered ">
<thead>
<tr>
<th scope="col">Title 1</th>
<th scope="col">Title 2</th>
<th scope="col">Title 3</th>
<th scope="col">Title 4 </th>
<th scope="col">Title 5</th>
<th scope="col">Title 6</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Title 1:">
<span>Some title</span>
</td>
<td data-title="Title 2:">60</td>
<td data-title="Title 3">0</td>
<td data-title="Title 4:">5.0</td>
<td data-title="Title 5:">
<button>Add</button>>
</td>
<td data-title="Title 6:"></td>
</tr>
</tbody>
</table>
Problem is when I'm on mobile screen and value is not entered, it screws my layout, but when I put something like -, or . everything works fine. Here is picture
Is there any solution how to fix this? Check title attribute value is empty or not? Help please
Also my css is:
td[data-title]:before {
content: attr(data-title);
float: left;
font-size: 1em;
color: rgba(94, 93, 82, 0.75);
}
html css html5 css3 responsive-design
asked Nov 19 at 11:34
jomskris
205
add a comment |
up vote
0
down vote
favorite
I have a table like this and on desktop everything works fine
Here is HTML:
<table class="responsive-table table-bordered ">
<thead>
<tr>
<th scope="col">Title 1</th>
<th scope="col">Title 2</th>
<th scope="col">Title 3</th>
<th scope="col">Title 4 </th>
<th scope="col">Title 5</th>
<th scope="col">Title 6</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Title 1:">
<span>Some title</span>
</td>
<td data-title="Title 2:">60</td>
<td data-title="Title 3">0</td>
<td data-title="Title 4:">5.0</td>
<td data-title="Title 5:">
<button>Add</button>>
</td>
<td data-title="Title 6:"></td>
</tr>
</tbody>
</table>
Problem is when I'm on mobile screen and value is not entered, it screws my layout, but when I put something like -, or . everything works fine. Here is picture
Is there any solution how to fix this? Check title attribute value is empty or not? Help please
Also my css is:
td[data-title]:before {
content: attr(data-title);
float: left;
font-size: 1em;
color: rgba(94, 93, 82, 0.75);
}
html css html5 css3 responsive-design
asked Nov 19 at 11:34
jomskris
205
Try setting minimum-height of cell or row.
– Zydnar
Nov 19 at 11:36
that is cause thetheadhasn't got any padding
– Paplusc
Nov 19 at 11:39
Besides it's quite strange table, where the first column is table head. Some HTML attributes like<table>has builtin CSS attributes likedisplay: table. If you want to do something really custom use<div>and<span>or use firstall: initialand then add your styles. And for semantics areariaattributes.
– Zydnar
Nov 19 at 11:41
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have a table like this and on desktop everything works fine
Here is HTML:
<table class="responsive-table table-bordered ">
<thead>
<tr>
<th scope="col">Title 1</th>
<th scope="col">Title 2</th>
<th scope="col">Title 3</th>
<th scope="col">Title 4 </th>
<th scope="col">Title 5</th>
<th scope="col">Title 6</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Title 1:">
<span>Some title</span>
</td>
<td data-title="Title 2:">60</td>
<td data-title="Title 3">0</td>
<td data-title="Title 4:">5.0</td>
<td data-title="Title 5:">
<button>Add</button>>
</td>
<td data-title="Title 6:"></td>
</tr>
</tbody>
</table>
Problem is when I'm on mobile screen and value is not entered, it screws my layout, but when I put something like -, or . everything works fine. Here is picture
Is there any solution how to fix this? Check title attribute value is empty or not? Help please
Also my css is:
td[data-title]:before {
content: attr(data-title);
float: left;
font-size: 1em;
color: rgba(94, 93, 82, 0.75);
}
html css html5 css3 responsive-design
asked Nov 19 at 11:34
jomskris
205
I have a table like this and on desktop everything works fine
Here is HTML:
<table class="responsive-table table-bordered ">
<thead>
<tr>
<th scope="col">Title 1</th>
<th scope="col">Title 2</th>
<th scope="col">Title 3</th>
<th scope="col">Title 4 </th>
<th scope="col">Title 5</th>
<th scope="col">Title 6</th>
</tr>
</thead>
<tbody>
<tr>
<td data-title="Title 1:">
<span>Some title</span>
</td>
<td data-title="Title 2:">60</td>
<td data-title="Title 3">0</td>
<td data-title="Title 4:">5.0</td>
<td data-title="Title 5:">
<button>Add</button>>
</td>
<td data-title="Title 6:"></td>
</tr>
</tbody>
</table>
Problem is when I'm on mobile screen and value is not entered, it screws my layout, but when I put something like -, or . everything works fine. Here is picture
Is there any solution how to fix this? Check title attribute value is empty or not? Help please
Also my css is:
td[data-title]:before {
content: attr(data-title);
float: left;
font-size: 1em;
color: rgba(94, 93, 82, 0.75);
}
html css html5 css3 responsive-design
html css html5 css3 responsive-design
asked Nov 19 at 11:34
jomskris
205
asked Nov 19 at 11:34
jomskris
205
asked Nov 19 at 11:34
jomskris
205
asked Nov 19 at 11:34
jomskris
205
asked Nov 19 at 11:34
jomskris
205
205
Try setting minimum-height of cell or row.
– Zydnar
Nov 19 at 11:36
that is cause thetheadhasn't got any padding
– Paplusc
Nov 19 at 11:39
Besides it's quite strange table, where the first column is table head. Some HTML attributes like<table>has builtin CSS attributes likedisplay: table. If you want to do something really custom use<div>and<span>or use firstall: initialand then add your styles. And for semantics areariaattributes.
– Zydnar
Nov 19 at 11:41
add a comment |
Try setting minimum-height of cell or row.
– Zydnar
Nov 19 at 11:36
that is cause thetheadhasn't got any padding
– Paplusc
Nov 19 at 11:39
Besides it's quite strange table, where the first column is table head. Some HTML attributes like<table>has builtin CSS attributes likedisplay: table. If you want to do something really custom use<div>and<span>or use firstall: initialand then add your styles. And for semantics areariaattributes.
– Zydnar
Nov 19 at 11:41
Try setting minimum-height of cell or row.
– Zydnar
Nov 19 at 11:36
Try setting minimum-height of cell or row.
– Zydnar
Nov 19 at 11:36
that is cause the
thead hasn't got any padding– Paplusc
Nov 19 at 11:39
that is cause the
thead hasn't got any padding– Paplusc
Nov 19 at 11:39
Besides it's quite strange table, where the first column is table head. Some HTML attributes like
<table> has builtin CSS attributes like display: table. If you want to do something really custom use <div> and <span> or use first all: initial and then add your styles. And for semantics are aria attributes.– Zydnar
Nov 19 at 11:41
Besides it's quite strange table, where the first column is table head. Some HTML attributes like
<table> has builtin CSS attributes like display: table. If you want to do something really custom use <div> and <span> or use first all: initial and then add your styles. And for semantics are aria attributes.– Zydnar
Nov 19 at 11:41
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
Try this:
td[data-title]{ padding: 1rem; }
Adjust the value of the padding you need.
answered 2 days ago
javimovi
976
New contributor
javimovi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
Try this:
td[data-title]{ padding: 1rem; }
Adjust the value of the padding you need.
answered 2 days ago
javimovi
976
New contributor
javimovi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
0
down vote
Try this:
td[data-title]{ padding: 1rem; }
Adjust the value of the padding you need.
answered 2 days ago
javimovi
976
New contributor
javimovi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
up vote
0
down vote
up vote
0
down vote
Try this:
td[data-title]{ padding: 1rem; }
Adjust the value of the padding you need.
answered 2 days ago
javimovi
976
New contributor
javimovi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Try this:
td[data-title]{ padding: 1rem; }
Adjust the value of the padding you need.
answered 2 days ago
javimovi
976
New contributor
javimovi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 2 days ago
javimovi
976
New contributor
javimovi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered 2 days ago
javimovi
976
answered 2 days ago
javimovi
976
976
New contributor
javimovi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
javimovi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
javimovi is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
add a comment |
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53373772%2fcheck-css-title-attribute-value-empty-or-not%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Try setting minimum-height of cell or row.
– Zydnar
Nov 19 at 11:36
that is cause the
theadhasn't got any padding– Paplusc
Nov 19 at 11:39
Besides it's quite strange table, where the first column is table head. Some HTML attributes like
<table>has builtin CSS attributes likedisplay: table. If you want to do something really custom use<div>and<span>or use firstall: initialand then add your styles. And for semantics areariaattributes.– Zydnar
Nov 19 at 11:41