This question already has an answer here:
select the whole <td> on click instead of only the <a> inside of it
(1 answer)
Closed 7 years ago.
I have a table where I have some <a>'s, what I want: make clickable the full <td> which contains those <a>'s.
Pasting my code will explain what I want better
<td>
<a><span>{{:: row.spread.spread}} ({{:: row.spread.moneyLine}})</span></a>
</td>
for now the only clickable area is the one with red border
Here my css
td {
border-bottom: 0;
font-weight: bold;
padding: get-space(x-small) + 2;
text-align: center;
vertical-align: middle;
a {
border: 1px solid red;
}
OK, all I need is take approach of the full td and make them clickable instead of only be able to click over the links, is that clear for you?
Remove padding from the td and add it to the a, like this:
td {
border-bottom: 0;
font-weight: bold;
padding: 0;
text-align: center;
vertical-align: middle;
a {
border: 1px solid red;
display: block;
padding: get-space(x-small) + 2;
}
}
Also, make sure you set display: block on the anchor element.
in jQuery
$('td').click(function() { window.location = $('a',this).attr('href') });
add to your CSS to improve the UX
td { cursor: pointer }
Related
This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 1 year ago.
I'm kinda lost, because this is weird for me, it's supposed to not have gap between either button or hyperlink tags, because i use display: inline-block. I'm not using margin, and chrome inspector also telling me that there's no margins in-between.
Screenshot: https://i.stack.imgur.com/P7L2w.png
.titlebar {
width: 100%;
height: auto;
background: var(--titlebar-color);
user-select: none;
-webkit-app-region: drag;
}
.titlebar * {
-webkit-app-region: no-drag;
height: 100%;
}
.titlebar a {
all: unset;
display: inline-block;
cursor: default;
padding: 1px 11px;
text-align: center;
font-family: 'Inconsolata', monospace;
background: var(--titlebar-button-color);
}
.titlebar a#titlebar-title {
background: var(--titlebar-button-title-color);
}
I also using normalize.css and skeleton.css.
Codepen: https://codepen.io/mahesha-c-gumelar/pen/jOBJgOK
How can I remove the gap between hyperlink block, any help is appreciated. Thank you.
Write item's html tags without enter or space, Like this:
a {
display: inline-block;
width: 100px;
height: 40px;
background: gray;
color: #fff;
text-align: center;
line-height: 40px;
}
<div class="test">
123
</div>
You can write font-size: 0 on the parent element, but set it back on the a tag
enter image description here
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 3 years ago.
I would need to get rid of the space below the two span tags and don't understand what causes them to be there.
HTML
<div>
<span></span><span></span>
</div>
CSS
div {
border: 1px solid gray;
display: inline-block;
}
span {
width: 13px;
height: 25px;
display: inline-block;
}
span:not(:last-child) {
border-right: 1px solid gray;
}
Screenshot:
https://jsfiddle.net/wjy5hxnu/
You can check the updated jsfiddle here.
div {
font-size: 0px;
}
Adding font-size: 0 to div will solve the problem and if you have to use any text inside span you can add font-size directly in the span.
div {
border: 1px solid gray;
display: inline-block;
line-height: 11px;
}
Line height will lower the div to meet the line.
Well, I have two buttons (in Spanish) and these buttons are inside an 'a' (link tag) so that:
<div class="MB789">
<button class="B121">Ya soy miembro</button>
<button class="B122">Quiero unirme</button>
</div>
The purpose of the 'a' is obviously to redirect the user to the respective page and the buttons are for the style (yes, I want the user to see buttons and not links)
In the CSS I wrote the following:
.MB789{
display: table;
padding: 10px;
text-align: center;
}
.MB789 button{
border: none;
border: 1px solid black;
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}
.MB789 a{
margin: 10px;
background: red; /*Debug: to visualize the elements 'a'*/
}
This is the result:
And that's the problem, that the 'a' elements stand out from the buttons.
And this is what happens when I tell the elements to show themselves as a table.
.MB789 a{
display: table;
background: red; /*Debug: to visualize the elements 'a'*/
}
Then this is what happens:
What I want is that 'a' elements do not protrude from the buttons, but that when the user click on a button, be redirected to the respective link.
Note: I know that Javascript can be redirected, but I refrain from doing this using that language because the user can disable Javascript from the browser settings.
Firstly, you cannot nest <button></button> elements inside an <a> tag, that is invalid markup. Please see why here: Can I nest a <button> element inside an <a> using HTML5?
Secondly you can style the <a> tag like a button and this will resolve your problem.
Your HTML markup needs to look like this:
<div class="MB789">
Ya soy miembro
Quiero unirme
</div>
Your CSS would look like this:
.MB789{
display: inline-block;
padding: 10px;
text-align: center;
}
.MB789 a{
display: inline-block;
border: 1px solid black;
padding: 10px 20px;
margin: 10px;
cursor: pointer;
}
You've put a 10px margin on the buttons, because they're inside of the a tags this margin will be between the buttons and the edge of the a tags, making them protrude out from the button. Try removing that margin:
.MB789 button{
border: none;
border: 1px solid black;
padding: 10px 20px;
cursor: pointer;
}
I want the button forced to the left and on a new line. The only way I've been able to accomplish this so far is by inserting some extra markup, <br /><br /><br />, above the markup for the submit button.
How do I modify this CSS to force the button onto a new line?
fieldset input[type="submit"] {
background-color: #d3dce0;
border: 1px solid #787878;
cursor: pointer;
font-size: 1.0em;
font-weight: 600;
padding: 7px 7px 7px 7px;
margin-top: 20px;
display : inline-block;
}
In your CSS, please change this line:
fieldset input[type="submit"] {
display: inline-block;
}
to this way:
fieldset input[type="submit"] {
display: block;
}
And no spaces after display please. :)
I have CSS definitions for various elements around Table as shown below (Details omitted, only style names for reference).
table.entities {
border: 1px solid #c5d7ef;
border-collapse: collapse;
width: 100%;
margin-bottom: 0;
}
table.entities th, table.entities td {
padding: .25em 1.5em .5em .5em;
}
table.entities th {
font-weight: bold;
text-align: left;
background: #e5ecf9;
white-space: nowrap;
}
table.entities th a, table.entities th a:visited {
color: black;
text-decoration: none;
}
table.entities td {
background-color: #fff;
text-align: left;
vertical-align: top;
cursor: pointer;
}
table.entities tr.even td {
background-color: #f9f9f9;
}
And I apply the styles for even rows like:
flexTable.getRowFormatter().getElement(row).setClassName("even");
But for some reason, the header styles are not applied to table. Here is what I have tried
As it is I would expect th to apply style to first row, but not sure if that is a valid assumption to make
Changed the header style from th to something like theader and then explicitely applied to first row using row formatter for first row. I tried first row value as 1 & 0 both but either didn't give me results
Can anyone help me spotting where I might be going wrong?
I am pretty sure that the FlexTable does not render <th> tags. Everything is contained in the <tbody>.
You must also remember that the <tr> tag is pretty much unstylable so to style the whole row you need to apply the same style to all child <td> tags.
tr.someStyle td {
/* all styles that apply to the row */
}
If you post your actual styles and what is not being applied, maybe we can help further.